how to disable a form element of formArray in reactive formGroup using Angular5

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.

new FormGroup({ 'regions': new FormControl({value:null,disabled: true}, Validators.required) }) — Anoop Babu
– Anoop Babu, Commented Apr 4, 2018 at 9:37

Anshuman Jaiswal · Accepted Answer · 2018-04-04 06:48:57Z

0

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

answered Apr 4, 2018 at 6:48

Anshuman Jaiswal

5,4621 gold badge31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eliseo Over a year ago

I don't know mat-select, but you can take a look to stackoverflow.com/questions/49205601/…

Collectives™ on Stack Overflow

how to disable a form element of formArray in reactive formGroup using Angular5

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related