Angular 4 Reactive Forms Toggle Validation for Hidden Form Elements

Question

I have a reactive form where on load no fields are required. If an option is selected that will add additional form elements into the formGroup then the new shown fields will be all required. If the nickname field is hidden then you should be able to submit the form just fine. If the nickname is shown then the nickname field is required and the submit button is disabled until the nickname field is full. Here is a sample of what I want to do.

My question is, how can I enable/disable validation once the form element is shown/hidden?

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

App.component.ts

import { Component, OnInit } from '@angular/core';
import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'My Reactive Form';

  constructor(
    private fb: FormBuilder
  ) {}

  myForm: FormGroup;
  showNick: boolean = false;

  ngOnInit() {
    this.myForm = this.fb.group({
      'firstName': new FormControl(),
      'nickName': new FormControl('', Validators.required),
      'lastName': new FormControl()
    })
  }

  toggleNick() {
    this.showNick = !this.showNick;
  }
}

app.component.html

<form [formGroup]="myForm">
  <div class="my-box">
    <label>
      First Name
      <input type="text" formControlName="firstName">
    </label>
  </div>
  <div class="my-box nickname">
    Nickname? &nbsp; <a (click)="toggleNick()">yes / no</a>
  </div>
  <div class="my-box" *ngIf="showNick">
    <label>
      Nickname
      <input type="text" formControlName="nickName">
      <span class="validation-message" *ngIf="!myForm.controls['nickName'].valid && myForm.controls['nickName'].dirty">
    This field is invalid
  </span>
    </label>
  </div>
  <div class="my-box">
    <label>
      Last Name
      <input type="text" formControlName="lastName">
    </label>
  </div>
  <button [disabled]="myForm.invalid">Submit</button>
</form>

It seems you have not written the code to do what you describe. Something stopping you? Where is your problem in all this? — R. Richards
I haven't been able to accomplish what I need. I will edit my question at the top. Basically if the element is hidden then there is still something required in the formGroup. How can I toggle validation once the form elements is hidden? — iChido
Here is my working sample with the solution provided by DeborahK: stackblitz.com/edit/angular-twjirf — iChido

DeborahK DeborahK · Accepted Answer · 2018-03-19T21:46:58

In my application, I have a similar requirement. If the user asks to be notified by text, the phone is required. Otherwise the phone number is optional.

I wrote this method:

setNotification(notifyVia: string): void {
    const phoneControl = this.customerForm.get('phone');
    if (notifyVia === 'text') {
        phoneControl.setValidators(Validators.required);
    } else {
        phoneControl.clearValidators();
    }
    phoneControl.updateValueAndValidity();
}

It is called from this code which is in the ngOnInit:

    this.customerForm.get('notification').valueChanges
                     .subscribe(value => this.setNotification(value));

If the user changes the notification field (which is a radio button), it calls the setNotification method passing in the value. If the value is notification by 'text', it sets the phone's validation to required.

Otherwise it clears the phone field's validation.

Then it must call updateValueAndValidity to update the form info with this new validation.

Angular 4 Reactive Forms Toggle Validation for Hidden Form Elements

4 Answers