相同的打字稿方法禁用按钮但不是选择

Question

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

我在 typescript 组件文件上添加了一个方法来禁用它，它适用于 <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;
}

如何禁用选择？

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

看起来您正在使用带有响应式表单的 disabled 属性 指示。如果将 disabled 设置为 true 当您在组件类中设置此控件时，disabled 属性实际上将在 DOM 中设置为 你。我们建议使用这种方法来避免“检查后更改”错误。

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

Answer 1

由于您使用的是响应式表单，因此最好的方法是禁用代码中的控件，因为代码是真正的来源

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

据我所知，您在 for 循环中有选择，因此您可能需要将 rowIndex 附加到 formControlName，以便它们都有不同的 id。

在这种情况下，你会有类似

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

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