Angular reactive forms validation

Question

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

json file

  { "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"
}
]}

typescript file

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) => 
    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('')
  });
}

}

html file

<form [formGroup]="userDetails">
      <div *ngFor="let elements of formjson" class="container">
      <div [ngSwitch]="elements.type">
        <div class="formgroup" *ngSwitchCase="'text'">
         <label>
           {{elements.label}}
         </label>
           <input type="text" class="form-control" id={{elements.key}} name={{elements.key}} formControlName={{elements.key}} required={{elements.required}}/>
      <div *ngIf="role_name.invalid && (role_name.dirty || role_name.touched)" class="alert alert-danger">

      <div *ngIf="role_name.errors.required">
        Name is required.
      </div>

    </div>
    </div>
    <div class="formgroup" *ngSwitchCase="'dropdown'">
      <label>
        {{elements.label}}
      </label>
      <select class="form-control" required={{elements.required}}>
        <option *ngFor="let values of elements.options">{{values.value}}</option>
      </select>
    </div>
    <div class="formgroup" *ngSwitchCase="'textarea'">
      <label>
        {{elements.label}}
      </label>
      <textarea class="form-control" formControlName={{elements.key}} required={{elements.required}}></textarea>
    </div>
    <div *ngSwitchCase="'radio'">
      <div>
        {{elements.label}}
      </div>
      <span *ngFor="let values of elements.options">
        <label>{{values.value}}</label>
        <input type="radio" name="gender" required={{elements.required}} value={{values.value}}/>
      </span>
    </div>
    <div class="formgroup" *ngSwitchCase="'calender'">
      <label>
        {{elements.label}}
      </label>
      <input type="date" class="form-control" formControlName={{elements.key}} required={{elements.required}}/>
    </div>
    <div *ngSwitchDefault>textdefauklt</div>
   </div>
  </div>
   <p (click) = "click()">onclcik</p>
       </form>

And please help me in whether this the correct way of implementing or else any other good methods.

Sumit Vekariya Sumit Vekariya · Accepted Answer · 2020-03-16T11:35:02

You are using role_name variable, at many places in HTML file, which is not defined, anywhere in typescript file,

What I understand is you are trying to access the role_name form control, so you can set a getter like this in typescript file, which will return the role_name form control

export class AppComponent {
   title = 'my-app';
   formjson = form
   userDetails:object;

    /** Define your FormGroup here, You have given the same name for, FormGroup and 
        UserDetails variable, which is not correct
     */
    userDetailsForm: FormGroup;

   /** define the getter here, before the constructor gets called */
   get role_name() {
       return this.userDetailsForm.get('role_name');
   }
}

Note: Change userDetails to userDetailsForm in HTML file also

Angular reactive forms validation

1 Answers