相同的打字条方法禁用按钮，但不能选择

Question

我正在开发一个Angular 2应用程序，并且以反应性形式我要禁用<select>和<button>。

我在打字稿组件文件上添加了一种方法以禁用它，并且可以与<button>一起使用，但是它不适用于<select>，因为当<button>被禁用时，我可以在<select>中选择任何项目。

这是整个形式：

<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>

这是该形式的<select>：

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

和<button>：

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

我不知道为什么会发生这种情况。我是Angular和TypeScript的新手，也许问题是我在两个控件中都使用了相同的方法，但我不确定。

如果需要：

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;
}

我该怎么做才能禁用选择？

更新
我在浏览器的控制台中发现了此警告：

看起来您正在使用带有反应表格的残疾人属性 指示。如果将禁用到true 当您在组件类中设置此控件时，残障属性实际上将在DOM中设置 你。我们建议使用这种方法避免"检查后更改"错误。

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Answer 1

由于您使用的是反应性表格，最佳方法是禁用代码中的控件，因为代码是True

的来源

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

从我可以看到的内容中，您在循环中有选择的选择，因此您可能需要将RowIndex附加到FormControlname上，因此它们都具有不同的ID。

在这种情况下，您会有

之类的东西

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

如果您想在第1行上禁用选择。