How to show / hide the fields based on condition in dynamic way in Angular Reactive form

Issue

Here my scenario is i have 3 users

1. admin will have 3 fields email,firstname,lastname.

2. employee will have 4 fields email,firstname,lastname,contact.

3. frontOffice will have 5 fields email,firstname,lastname,airlineDetails,vendor,personNames.

stackblitz link -: https://stackblitz.com/edit/angular-material-forms-deborahk-jgxzic

based on condition i have to show these fields and set the values to these fields based on the here i followed a way where i am on disabling fields like below

 this.userForm = new FormGroup({
      email : new FormControl(null, Validators.email),
      firstName : new FormControl(null, Validators.required),
      lastName : new FormControl(null, Validators.required),
      contact: new FormControl({value: '', disabled: false}, Validators.required),
      airlineDetails: new FormControl({value: '', disabled: false}, Validators.required),
      vendor: new FormControl({value: '', disabled: false}, Validators.required),
      personNames: new FormControl({value: '', disabled: false}, Validators.required)
    });

  if(this.userOne=="admin"){
        this.userForm.get('contact').disable();
        this.userForm.get(' airlineDetails').disable();
        this.userForm.get('vendor').disable();
        this.userForm.get('personNames').disable();
    }
    if(this.userTwo=="employee"){
      this.userForm.get('contact').enable();
        this.userForm.get('airlineDetails').disable();
        this.userForm.get('vendor').disable();
        this.userForm.get('personNames').disable();
    }
     if(this.userTwo=="frontOffice"){
      this.userForm.get('contact').disable();
        this.userForm.get(' airlineDetails').enable();
        this.userForm.get('vendor').enable();
        this.userForm.get('personNames').enable();
    }
  }

is there any other way for these kind of hiding and showing the fields and later set the values in it

below is my code:

<mat-toolbar color="primary">
 <button type="button" (click)=" userData('admin')">ADMIN</button>
 &nbsp;
  <button type="button" (click)=" userData('employee')">EMPLOYEES</button>
   &nbsp;
  <button type="button" (click)=" userData('frontOffice')">frontOffice</button>

</mat-toolbar>

<div class="container" > 
  <form [formGroup]=" userForm" (ngSubmit)="onClick()" class="form">
   <!--Email-->
    <mat-form-field class="form-element" (ngSubmit)="onClick()">
      <input matInput type="email" placeholder="Email Address" formControlName="email">
    </mat-form-field>
   <!--First Name--> 
    <mat-form-field class="form-element">
      <input matInput type="text" placeholder="First name" formControlName="firstName">
    </mat-form-field>
     <!--last Name--> 
    <mat-form-field class="form-element">
      <input matInput type="text" placeholder="First name" formControlName="lastName">
    </mat-form-field>

    <!------------------------------------------------------------------->
    <mat-form-field class="form-element">
      <input matInput type="text" placeholder="contact" formControlName="contact">
    </mat-form-field>
 <!------------------------------------------------------------------->
    <mat-form-field class="form-element">
      <input matInput type="text" placeholder="airline details" formControlName="airlineDetails">
    </mat-form-field>
 <!------------------------------------------------------------------->
     <mat-form-field class="form-element">
      <input matInput type="text" placeholder="vendor" formControlName="vendor">
    </mat-form-field>

     <mat-form-field class="form-element">
      <input matInput type="text" placeholder="persons Names" formControlName="personNames">
    </mat-form-field>

  <button  type="submit" [disabled]="userForm.invalid">Submit</button>
    

  </form>
</div>

.ts code

 userForm: FormGroup;
  titleAlert: string = 'This field is required';
  post: any = '';
  userOne="admin";
  userTwo="employee";
  userThree="frontOffice"

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.createForm();
   
  }

  createForm() {
    this.userForm = new FormGroup({
      email : new FormControl(null, Validators.email),
      firstName : new FormControl(null, Validators.required),
      lastName : new FormControl(null, Validators.required),
      contact: new FormControl({value: '', disabled: false}, Validators.required),
      airlineDetails: new FormControl({value: '', disabled: false}, Validators.required),
      vendor: new FormControl({value: '', disabled: false}, Validators.required),
      personNames: new FormControl({value: '', disabled: false}, Validators.required)
    });

  }



 onClick(){
   console.log(this.userForm.value)
 }

  userData(params){
     if(this.userOne=="admin"){
        this.userForm.get('contact').disable();
        this.userForm.get(' airlineDetails').disable();
        this.userForm.get('vendor').disable();
        this.userForm.get('personNames').disable();
    }
    if(this.userTwo=="employee"){
      this.userForm.get('contact').enable();
        this.userForm.get('airlineDetails').disable();
        this.userForm.get('vendor').disable();
        this.userForm.get('personNames').disable();
    }
     if(this.userTwo=="frontOffice"){
      this.userForm.get('contact').disable();
        this.userForm.get(' airlineDetails').enable();
        this.userForm.get('vendor').enable();
        this.userForm.get('personNames').enable();
    }
  }

Solution

So you can actually set values on a disabled/hidden form element. If you want to include the disabled fields in the formData that you reference/pass to the backend, then the object you use to reference the form element needs to be:

this.userForm.getRawValue();

This gets all the form properties, whereas the form.value property does not include disabled elements. You can set form values from the component file with

this.userForm.get('contact').setValue(<my-value>)

But for safe measures anytime I update a form elements value I run the function

this.userForm.get('contact').updateValueAndValidity();
// I think this.userForm.updateValueAndValidity() may work on the whole form, 
// but last time I was messing with it I had some issues.

EDIT

To hide in the template without crowding the dom I would do

<ng-container *ngIf="userForm.get('contact').disabled">...</ng-container>

Answered By - iamaword