同じタイプスクリプトメソッドはボタンを無効にしますが、選択は無効にします

Question

私はAngular 2アプリケーションを開発しており、反応する形式では<select>と<button>を無効にします。

私はそれを無効にするにはtypescriptですコンポーネントファイルにメソッドを追加して、それが<button>で正常に動作しますが、<button>が無効になっている間、私は<select>で任意の項目を選択することができますので、それが<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; 
} 

私は選択を無効にするために行うためには何を持っていますか？

UPDATE
私は、ブラウザのコンソールでこの警告を発見した：

あなたが反応型 ディレクティブで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を持つようにする必要があります。あなたが行に1