The same typescript method disable a button but not a select

Question

I'm developing an Angular 2 application and in a reactive form I want to disable a <select> and a <button>.

I have added a method on typescript component file to disable it, and it works fine with the <button> but it doesn't work with the <select>because while the <button> is disabled I can select any item in the <select>.

This is the whole form:

<div class="row">
    <div class="col">
        <form [formGroup]="varDataForm" (ngSubmit)="onSubmit()" novalidate>
            <div formArrayName="aggLevels"
                    *ngFor="let agLevel of varDataForm.get('aggLevels')?.controls; let aggLevelRow = index;">
                <div [formGroupName]="aggLevelRow">
                    <label>{{agLevel?.get('aggregationLevelName')?.value}}</label>
                    <div formArrayName="variableDataForLevel"
                            *ngFor="let vardata of agLevel.get('variableDataForLevel')?.controls; let rowIndex = index;">
                        <div [formGroupName]="rowIndex">
                            <select formControlName="variableDataId" [disabled]="disableDelete(aggLevelRow, rowIndex)">
                                <option *ngFor="let gs1 of gs1AIs" [value]="gs1.id">{{gs1.description}}</option>
                            </select>
                            <input formControlName="value" placeholder="Valor">
                            <div class="error" *ngIf="vardata.get('value').hasError('required') && vardata.get('value').touched">
                                Obligatorio
                            </div>
                            <button type="button" class="btn" (click)="deleteRow(aggLevelRow, rowIndex)" [disabled]="disableDelete(aggLevelRow, rowIndex)">Borrar</button>
                        </div>
                    </div>
                    <button type="button" class="btn" (click)="addRow(aggLevelRow)" [disabled]="disableAdd()">A&ntilde;adir</button>
                </div>
            </div>
            <button *ngIf="varDataForm.get('aggLevels')?.controls?.length > 0" type="submit" class="btn btn-success" [disabled]="disableSubmit()">Guardar cambios</button>
        </form>
        <button *ngIf="this.isWizard" type="button" (click)="endWizard()">Finalizar</button>
    </div>
</div>

And this is the <select> from that form:

<select formControlName="variableDataId" [disabled]="disableDelete(aggLevelRow, rowIndex)">
    <option *ngFor="let gs1 of gs1AIs" [value]="gs1.id">{{gs1.description}}</option>
</select>

And the <button>:

<button type="button" class="btn" (click)="deleteRow(aggLevelRow, rowIndex)" [disabled]="disableDelete(aggLevelRow, rowIndex)">Borrar</button>

I don't know why this is happening. I'm new with Angular and Typescript and maybe the problem is that I'm using the same method in both controls but I'm not sure.

If you need it:

disableDelete(aggLevelRow: number, varDataRow: number) {
    let aggLevelsArray: FormArray = this.varDataForm.controls['aggLevels'] as FormArray;
    let varDataFormArray: FormArray =
        aggLevelsArray.at(aggLevelRow).get('variableDataForLevel') as FormArray;

    let varDataId: FormControl =
        varDataFormArray.at(varDataRow).get('variableDataId') as FormControl;

    let exists: boolean = false;

    for (let ai of this.lawGS1AIs) {
        if (ai.gS1AIId == varDataId.value) {
            exists = true;
            break;
        }
    }

    return exists;
}

What do I have to do to disable a select?

UPDATE
I have found this warning in the browser's console:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.
  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Hugo Noro Hugo Noro · Accepted Answer · 2017-12-12T11:34:32

Since you are using reactive forms the best approach would be to disable the control in the code, since the code is the source of true

varDataForm.get('variableDataId').disable();

From what I can see you have the select inside a for loop so probably you need to append the rowIndex to the formControlName so they all have different ids.

In that case you would have something like

varDataForm.get(‘variableDataId_1’).disable()

If you wanted to disable the select on row 1.

The same typescript method disable a button but not a select

1 Answers