如何使用Angular5在反应式formGroup中禁用formArray的表单元素

Question

我在 formArray 中有两个下拉菜单。

<select formControlName="access" (change)="checkValue($event)" >
  <option[value]="1">Admin</option>
  <option[value]="2">Customer</option>
</select>

<mat-select  formControlName="regions" multiple>
  <mat-option *ngFor="let region of regionArray" [value]="region.regionId">{{region.description}}</mat-option>
</mat-select>

如果选择的访问权限是管理员，我将禁用区域选择。

checkValue(event) {  
    if (event.currentTarget.value === "1") {
        return this.myForm = this.fb.group({
                user: this.fb.array([this.disableDetail(),   ])
            }); 
    } else {  
        return this.myForm = this.fb.group({
                user: this.fb.array([this.enableDetail(),    ])
            }); 
    } 
}

enableDetail() {    
    return this.fb.group({
        regions: [{value:'',Validators: Validators.required, disabled:false}]     });   
    }

disableDetail() {
    return this.fb.group({
        regions: [{value:'', disabled:true}]    });  
}

我面临的问题是它会影响其他表单数组。 我希望如果我选择作为管理员的下拉值应该禁用并仅为该特定表单数组选择区域下拉列表的所有值。

Answer 1

HTML

<select formControlName="access" (change)="checkValue($event)" >
  <option[value]="1">Admin</option>
  <option[value]="2">Customer</option>
</select>

<mat-select [disabled]="isAdmin" formControlName="regions" multiple>
  <mat-option *ngFor="let region of regionArray" [value]="region.regionId">{{region.description}}</mat-option>
</mat-select>

组件

isAdmin: boolean;
checkValue(event) {  
    this.isAdmin = event.currentTarget.value === "1";
}