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

Question

I am having two dropdown in an 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>

I am disabling the regions selection if the access selected is as Admin.

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

I am facing issue that it is affecting the other form array. I want if the dropdown value I am choosing as Admin it should disable and select all values of region dropdown only for that particular formarray.

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>

Component

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