How to validate the reactive forms for dynamic input in angular

Question

I have create an reactive form with angular material. I have a select dropdown, So based on the dropdown selection. The input fields will change. So now with the below code. If i just submit it, It sending the array to my backend. If i enable the disable option to the button, If cannot submit since my forms has 8 inputs. But when i select one option, It will only have 6 fields. So how can i make the validations inorder to restrict user from submitting empty form.

Below is my HTML Code

<div class = "tp-container">
      <form [formGroup]="myForm" (ngSubmit)="submitForm()">
        <!-- Name -->
        <mat-form-field class="example-full-width" >
          <input matInput placeholder="Name" formControlName="name">
          <!-- error -->
          <mat-error *ngIf="errorHandling('name', 'required')">
            You must provide a <strong> Name</strong>
          </mat-error>
        </mat-form-field>

        <!-- Email -->
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Email" formControlName="email">
          <!-- error -->
          <mat-error *ngIf="errorHandling('email', 'required')">
            You must provide a <strong>email</strong>
          </mat-error>
        </mat-form-field>

            <!-- Class -->
            <mat-form-field>
                <mat-label>Item</mat-label>
                <mat-select [(value)]="selected" formControlName="Items">
                  <mat-option [value]="item" *ngFor="let item of Items">{{item}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

     <!-- Eng Name -->
     <mat-form-field class="example-full-width">
        <input matInput placeholder="Name" formControlName="engname">
        <!-- error -->
        <mat-error *ngIf="errorHandling('engname', 'required')">
          You must provide a <strong>Name</strong>
        </mat-error>
      </mat-form-field>

       <!-- JP Name -->
       <div *ngIf="myForm.get('Items').value == 'Mobile">
       <mat-form-field class="example-full-width" >
        <input matInput placeholder="JP Name" formControlName="jpname">
        <!-- error -->
        <mat-error *ngIf="errorHandling('jpname', 'required')">
          You must provide a <strong> Japanese Name</strong>
        </mat-error>
      </mat-form-field></div>

      <!-- LAN ID Name -->
      <div *ngIf="myForm.get('Items').value == 'Software'">
        <mat-form-field class="example-full-width" >
         <input matInput placeholder="LAN ID" formControlName="lan">
         <!-- error -->
         <mat-error *ngIf="errorHandling('lan', 'required')">
           Please provide your <strong> LAN ID</strong>
         </mat-error>
       </mat-form-field></div>

                    <!-- Application Name -->
      <div *ngIf="myForm.get('Items').value == 'Network'">
        <mat-form-field class="example-full-width" >
         <input matInput placeholder="Application Name" formControlName="app">
         <!-- error -->
         <mat-error *ngIf="errorHandling('app', 'required')">
           Please provide the <strong>Application Name</strong>
         </mat-error>
       </mat-form-field></div>

        <!-- Submit -->
        <div class="button-wrapper">
          <button type="submit" color=#C93C6A class="btn-block" >Submit</button>
        </div>

      </form>
    </div>

Below is my ts file:

import { Component,OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { HttpClient } from '@angular/common/http';

export interface Subject {
  name: string;
}
@Component({
  selector: 'app-lan',
  templateUrl: './lan.component.html',
  styleUrls: ['./lan.component.css']
})
export class LanComponent implements OnInit {

  myForm: FormGroup;

  Items: any = ['Mobile', 'Software','Network','Others'];


  constructor(public fb: FormBuilder,private http: HttpClient,) {}

  public selected = '';
  ngOnInit(): void {
    this.reactiveForm()
  }

  /* Reactive form */
  reactiveForm() {
    this.myForm = this.fb.group({
      name: ['', [Validators.required]],
      email: ['', [Validators.required]],
      Items:[''],
      request: ['Urgent'],
      startdate: ['', [Validators.required]],
      subjects: [this.SubjectsArray],
      engname: ['', [Validators.required]],
      jpname: ['', [Validators.required]],
      lan:['', [Validators.required]],
      soft:['', [Validators.required]],
      server:['', [Validators.required]],
      remarks:['']

    })
  }

  submitForm() {
    var formData: any = new FormData();
    formData.append("name", this.myForm.get('name').value);
    formData.append("email", this.myForm.get('email').value);
    formData.append("Items", this.myForm.get('Items').value);
    formData.append("request", this.myForm.get('request').value);
    formData.append("startdate", this.myForm.get('startdate').value);
    formData.append("subjects", this.myForm.get('subjects').value);
    formData.append("engname", this.myForm.get('engname').value);
    formData.append("jpname", this.myForm.get('jpname').value);
    formData.append("lan", this.myForm.get('lan').value);
    formData.append("soft", this.myForm.get('soft').value);
    formData.append("version", this.myForm.get('version').value);
    formData.append("reason", this.myForm.get('reason').value);
    formData.append("app", this.myForm.get('app').value);
    formData.append("server", this.myForm.get('server').value);
     formData.append("remarks", this.myForm.get('remarks').value);
    formData.append("port", this.myForm.get('port').value);

    console.log(this.myForm)
    this.http.post('API url', this.myForm.value).subscribe(
      (response) => console.log(response),
      (error) => console.log(error))
    console.log("Form Submitted!");
    this.myForm.reset();
  }

}

Answer 1

you can 2 way to check the validation

 isAddedElement : boolean = false;
 changeForValue() {
    this.isAddedElement.valueChanges.subscribe(x => {
      this.isAddedElement = x;
      if (x) {
        this.myForm.addControl('ctrl1', new FormControl('', Validators.required));
        this.myForm.addControl('ctrl2', new FormControl('', Validators.required));
      } else {
        this.myForm.removeControl('ctrl1');
        this.myForm.removeControl('ctrl2');
      };
    });
  }

HTML

            <div class="row" *ngIf="isAddedElement">
          <div class="col s12">
            <mat-form-field class="example-full-width">
              <input matInput placeholder="ctrl1" required formControlName="ctrl1">
              <mat-error *ngIf="myForm.get('ctrl1').hasError('required')">
                ctrl1 is <strong>required</strong>
              </mat-error>
            </mat-form-field>
          </div>
        </div>