How to do Form Validations Conditionally in Reactive Form in Ionic?

Question

I would like to show different fields based on the type of user and do form validation conditionally based on the type of the user. I do not want to create separate form for each type of user. There are three types of user platinum, gold and regular.

Code of .ts file

   this.signupForm = this.formBuilder.group(
      {
        mobileNumber: new FormControl(
          '',
          Validators.compose([
            Validators.required,
            Validators.pattern(this.regExNumberCell),
          ])
        ),

  
        confermPassword: new FormControl(
          '',
          Validators.compose([
            Validators.required,
            Validators.pattern(this.regExPassword),
          ])
        ),
        surName: new FormControl(
          '',
          Validators.compose([
            Validators.required,
            Validators.pattern(this.regExsurName),
          ])
        ),
        email: new FormControl(
          '',
          Validators.compose([
            Validators.required,
            Validators.pattern(this.regExEmail),
          ])
        ),

        name: new FormControl(
          '',
          Validators.compose([
            Validators.required,
            Validators.pattern(this.regExName),
          ])
        ),

        password: new FormControl(
          '',
          Validators.compose([
            Validators.required,
            Validators.pattern(this.regExPassword),
          ])
        ),
      },
      { validator: this.passwordsMatchValidator }
    );

Answer 1

You can create form with validation conditionally as follow:

In your .ts file

if (user === 'normal') {
  // Inside this clause put the validation logic for normal user and make the fields required and optional according to your requirement
  this.signupForm = this.formBuilder.group(
  {
    mobileNumber: new FormControl(
      '',
      Validators.compose([
        Validators.required,
        Validators.pattern(this.regExNumberCell),
      ])
    ),
   }
   // ....
  );

}
else if (user === 'gold') {
// Inside this clause put the validation logic for gold user and make the fields required and optional according to your requirement
  this.signupForm = this.formBuilder.group(
  {
    mobileNumber: new FormControl(
      '',
      Validators.compose([
        Validators.required,
        Validators.pattern(this.regExNumberCell),
      ])
     

    ),  // .... 
    }
   );

  }

 else if (user === 'platinum') {
 // Inside this clause put the validation logic for platinum user and make the fields required and optional according to your requirement
  this.signupForm = this.formBuilder.group(
  {
    mobileNumber: new FormControl(
      '',
      Validators.compose([
        Validators.required,
        Validators.pattern(this.regExNumberCell),
      ])

    ),           // ....
   }
  );

       }

In .html file you can show and hide fields based on the type of user, such as :

 <ng-container *ngIf="user!== 'gold'">
    <ion-label class="inputTitle-label">Username</ion-label>
    <div class="input-container">
      <ion-input
        class="input"
        formControlName="username"
        autocomplete="off"
        type="text"
        required
      ></ion-input>
    </div>