ng serve localhost:4200/ 
https://stackblitz.com/edit/dynamic-form-generate-from-json-angular-2-reactive-form?file=src%2Fapp%2Fapp.component.ts https://medium.com/@fabiokounang/angular-6-dynamic-form-with-reactive-form-controls-43a10176a9f1 https://dzone.com/articles/how-to-create-custom-validators-in-angular https://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example https://stackblitz.com/edit/angular-6-reactive-form-validation?file=app%2Fapp.component.html
Angular provides us many useful validators, including required, minLength, maxLength, and pattern. These validators are part of the Validators class, which comes with the @angular/forms package.
Let's assume you want to add a required validation to the email control and a maxLength validation to the password control. Here's how you do that:
this.loginForm = new FormGroup({ email: new FormControl(null, [Validators.required]), password: new FormControl(null, [Validators.required, Validators.maxLength(8)]), age: new FormControl(null) }); To work with validators, make sure to import them into the component class:
import { FormGroup, FormControl, Validators } from '@angular/forms'; On the template, you can use validators to show or hide an error message. Essentially, you are reading formControl using the get() method and checking whether it has an error or not using the hasError() method. You are also checking whether formControl is touched or not using the touched property.
You can actually achieve this already with the submitted flag on the top level form directive. create form directive using #formDir="ngForm" and then check form is submitted or not using "formDir.submitted" checking. "formDir.submitted" will return you boolean value true or false.
<div class="col-12 form-group"> <label>email</label> <input type="email" formControlName="email" class="form-control" [ngClass]="{'is-invalid' : registerForm.get(form.key).errors && formDir.submitted }"> <div *ngIf="!registerForm.get(form.key).valid && registerForm.get(form.key).errors && formDir.submitted"> <span class="error" *ngIf="registerForm.get(form.key).errors.hasOwnProperty('required')">email is required</span> <span class="error" *ngIf="registerForm.get(form.key).errors.hasOwnProperty('email')">email must be valid</span> </div> </div> <div class="col-12 form-group"> <label>{{form.key}}</label> <input [type]="form.input" [formControlName]="form.key" class="form-control" [ngClass]="{'is-invalid' : registerForm.get(form.key).errors && formDir.submitted }"> <div *ngIf="!registerForm.get(form.key).valid && registerForm.get(form.key).errors && formDir.submitted"> <div *ngFor="let err of form.valids; let k = index"> <span class="error" *ngIf="registerForm.get(form.key).errors.hasOwnProperty(err.valid)">{{err.error}}</span> </div> </div> </div> OR
<div class="col-12 form-group"> <label>{{form.key}}</label> <input [type]="form.input" [formControlName]="form.key" class="form-control" [ngClass]="{'is-invalid' : registerForm.get(form.key).errors && formDir.submitted }"> <div *ngIf="!registerForm.get(form.key).valid && registerForm.get(form.key).errors && formDir.submitted"> <div *ngFor="let err of form.valids; let k = index"> <span class="error" *ngIf="registerForm.get(form.key).hasError(err.valid)">{{err.error}}</span> </div> </div> </div>