title: How to validate the reactive forms for dynamic input in angular
body: <p>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.</p>
  
  <p>Below is my HTML Code</p>
  
  <pre><code>&lt;div class = "tp-container"&gt;
        &lt;form [formGroup]="myForm" (ngSubmit)="submitForm()"&gt;
          &lt;!-- Name --&gt;
          &lt;mat-form-field class="example-full-width" &gt;
            &lt;input matInput placeholder="Name" formControlName="name"&gt;
            &lt;!-- error --&gt;
            &lt;mat-error *ngIf="errorHandling('name', 'required')"&gt;
              You must provide a &lt;strong&gt; Name&lt;/strong&gt;
            &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
  
          &lt;!-- Email --&gt;
          &lt;mat-form-field class="example-full-width"&gt;
            &lt;input matInput placeholder="Email" formControlName="email"&gt;
            &lt;!-- error --&gt;
            &lt;mat-error *ngIf="errorHandling('email', 'required')"&gt;
              You must provide a &lt;strong&gt;email&lt;/strong&gt;
            &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
  
              &lt;!-- Class --&gt;
              &lt;mat-form-field&gt;
                  &lt;mat-label&gt;Item&lt;/mat-label&gt;
                  &lt;mat-select [(value)]="selected" formControlName="Items"&gt;
                    &lt;mat-option [value]="item" *ngFor="let item of Items"&gt;{{item}}
                    &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
                &lt;/mat-form-field&gt;
  
       &lt;!-- Eng Name --&gt;
       &lt;mat-form-field class="example-full-width"&gt;
          &lt;input matInput placeholder="Name" formControlName="engname"&gt;
          &lt;!-- error --&gt;
          &lt;mat-error *ngIf="errorHandling('engname', 'required')"&gt;
            You must provide a &lt;strong&gt;Name&lt;/strong&gt;
          &lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
  
         &lt;!-- JP Name --&gt;
         &lt;div *ngIf="myForm.get('Items').value == 'Mobile"&gt;
         &lt;mat-form-field class="example-full-width" &gt;
          &lt;input matInput placeholder="JP Name" formControlName="jpname"&gt;
          &lt;!-- error --&gt;
          &lt;mat-error *ngIf="errorHandling('jpname', 'required')"&gt;
            You must provide a &lt;strong&gt; Japanese Name&lt;/strong&gt;
          &lt;/mat-error&gt;
        &lt;/mat-form-field&gt;&lt;/div&gt;
  
        &lt;!-- LAN ID Name --&gt;
        &lt;div *ngIf="myForm.get('Items').value == 'Software'"&gt;
          &lt;mat-form-field class="example-full-width" &gt;
           &lt;input matInput placeholder="LAN ID" formControlName="lan"&gt;
           &lt;!-- error --&gt;
           &lt;mat-error *ngIf="errorHandling('lan', 'required')"&gt;
             Please provide your &lt;strong&gt; LAN ID&lt;/strong&gt;
           &lt;/mat-error&gt;
         &lt;/mat-form-field&gt;&lt;/div&gt;
  
                      &lt;!-- Application Name --&gt;
        &lt;div *ngIf="myForm.get('Items').value == 'Network'"&gt;
          &lt;mat-form-field class="example-full-width" &gt;
           &lt;input matInput placeholder="Application Name" formControlName="app"&gt;
           &lt;!-- error --&gt;
           &lt;mat-error *ngIf="errorHandling('app', 'required')"&gt;
             Please provide the &lt;strong&gt;Application Name&lt;/strong&gt;
           &lt;/mat-error&gt;
         &lt;/mat-form-field&gt;&lt;/div&gt;
  
          &lt;!-- Submit --&gt;
          &lt;div class="button-wrapper"&gt;
            &lt;button type="submit" color=#C93C6A class="btn-block" &gt;Submit&lt;/button&gt;
          &lt;/div&gt;
  
        &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Below is my ts file:</p>
  
  <pre><code>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) =&gt; console.log(response),
        (error) =&gt; console.log(error))
      console.log("Form Submitted!");
      this.myForm.reset();
    }
  </code></pre>
  
  <p>}</p>