title: Angular reactive forms validation
body: <p><a href="https://i.stack.imgur.com/ZCupk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZCupk.png" alt="enter image description here"></a>I am new to angular , i am trying to build a form using dynamic json. I have build a form, i am getting some issues in validating the form . I have attached json and code for refernce, any help will be appreciable. Thanks in advance</p>
  
  <p>json file</p>
  
  <pre><code>  { "form" : [
  {
      "key": "role_name",
      "label": "Role Name",
      "type": "text",
      "value": "",
      "required": true,
      "order": 1,
      "validationMessage":"Role Name is required"
  },
  {
      "key": "brave",
      "label": "Bravery Rating",
      "type": "dropdown",
      "options": [
        {"key": "solid",  "value": "Solid"},
        {"key": "great",  "value": "Great"},
        {"key": "good",   "value": "Good"},
        {"key": "unproven", "value": "Unproven"}
      ],
     "required": true,
      "order": 5,
      "validationMessage":"Bravery Rating is required"
  },
  {
      "key": "comments",
      "label": "comments",
      "type": "textarea",
      "value": "",
      "required": false,
      "order": 6,
      "validationMessage":null
  },
  {
      "key": "last_name",
      "label": "Last Name",
      "type": "text",
      "value": "",
      "required": false,
      "order": 2,
      "validationMessage":null
  },
  {
      "key": "gender",
      "label": "Gender",
      "type": "radio",
      "value": "",
      "options": [
        {"key": "male",  "value": "Male"},
        {"key": "female",  "value": "Female"}
       ],
      "required": true,
      "order": 3,
      "validationMessage":"Gender is required"
  },
  {
      "key": "dateOfBirth",
      "label": "Date of birth",
      "type": "calender",
      "value": "",
      "required": true,
      "order": 4,
      "validationMessage":"Date of birth is required"
  }
  ]}
  </code></pre>
  
  <p>typescript file </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { FormGroup,FormControl } from '@angular/forms';
  import { form } from '../assets/form.json';
  import { Validators } from '@angular/forms'
  
  @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
   })
  
  export class AppComponent {
  title = 'my-app';
  formjson = form
  userDetails:object;
  
  
  click():void{
    console.log(typeof(form));
    console.log(this.userDetails['value']);
  }
  
  ngOnInit(){
    this.formjson.sort((a,b) =&gt; 
      a.order - b.order
    )
    this.userDetails = new FormGroup({
      role_name : new FormControl(this.userDetails['name'],[Validators.required]),
      brave : new FormControl(''),
      comments : new FormControl(''),
      last_name : new FormControl(''),
      gender : new FormControl(''),
      dateOfBirth : new FormControl('')
    });
  }
  </code></pre>
  
  <p>}</p>
  
  <p>html file </p>
  
  <pre><code>&lt;form [formGroup]="userDetails"&gt;
        &lt;div *ngFor="let elements of formjson" class="container"&gt;
        &lt;div [ngSwitch]="elements.type"&gt;
          &lt;div class="formgroup" *ngSwitchCase="'text'"&gt;
           &lt;label&gt;
             {{elements.label}}
           &lt;/label&gt;
             &lt;input type="text" class="form-control" id={{elements.key}} name={{elements.key}} formControlName={{elements.key}} required={{elements.required}}/&gt;
        &lt;div *ngIf="role_name.invalid &amp;&amp; (role_name.dirty || role_name.touched)" class="alert alert-danger"&gt;
  
        &lt;div *ngIf="role_name.errors.required"&gt;
          Name is required.
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="formgroup" *ngSwitchCase="'dropdown'"&gt;
        &lt;label&gt;
          {{elements.label}}
        &lt;/label&gt;
        &lt;select class="form-control" required={{elements.required}}&gt;
          &lt;option *ngFor="let values of elements.options"&gt;{{values.value}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="formgroup" *ngSwitchCase="'textarea'"&gt;
        &lt;label&gt;
          {{elements.label}}
        &lt;/label&gt;
        &lt;textarea class="form-control" formControlName={{elements.key}} required={{elements.required}}&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;div *ngSwitchCase="'radio'"&gt;
        &lt;div&gt;
          {{elements.label}}
        &lt;/div&gt;
        &lt;span *ngFor="let values of elements.options"&gt;
          &lt;label&gt;{{values.value}}&lt;/label&gt;
          &lt;input type="radio" name="gender" required={{elements.required}} value={{values.value}}/&gt;
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="formgroup" *ngSwitchCase="'calender'"&gt;
        &lt;label&gt;
          {{elements.label}}
        &lt;/label&gt;
        &lt;input type="date" class="form-control" formControlName={{elements.key}} required={{elements.required}}/&gt;
      &lt;/div&gt;
      &lt;div *ngSwitchDefault&gt;textdefauklt&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
     &lt;p (click) = "click()"&gt;onclcik&lt;/p&gt;
         &lt;/form&gt;
  </code></pre>
  
  <p>And please help me in whether this the correct way of implementing or else any other good methods.</p>