Form validation error message show on submit in angular

Question

I am trying to validate form in angular 6 but not working. My code is in stackblitz. How to validate that form and how to show error message? https://stackblitz.com/edit/angular-6-reactive-form-validation-ctzf7f?file=app/app.component.html

     <div class="col-md-4">
             <label>
             <input type="radio" name="bhk" formControlName="onebhk" value="yes" /> 1 BHK
             </label>
             <label>
             <input type="radio" name="bhk" formControlName="onebhk" value="no" /> 2 BHK
            </label>
       </div> 

TS:

  this.registerForm=new FormGroup({
  userType:new FormControl('',Validators.compose([
    Validators.required 
  ])),
  modalType:new FormControl('',Validators.required),
  place:new FormControl('',Validators.required),
  onebhk:new FormControl('',Validators.required),

  min:new FormControl('',Validators.compose([
    Validators.required,
    Validators.min(200) 

  ])),
  max:new FormControl('',Validators.compose([
    Validators.required,
    Validators.max(2000)

  ]))

})

Answer 1

you have to make submitted flag to true on submit and check error with following condition:
<p style="color:red" *ngIf="!registerForm.controls.userType.valid && submitted">Required</p>

here is your solution. https://stackblitz.com/edit/angular-6-reactive-form-validation-cxzbr6?file=app/app.component.ts

Answer 2

You can use create a formgroup and use formcontrol to validate the data. Stackblitz https://stackblitz.com/edit/angular-6-reactive-form-validation-cy6avn

EXAMPLE

component.ts

constructor(private fb: FormBuilder) { }
formSubmitted: boolean;
  testForm = this.fb.group({
    field1: ['', [Validators.required]],
    field2: ['', [Validators.required]],
  });

  isFieldValid(field: string) {
    return (
      this.testForm.get(field).errors && this.testForm.get(field).touched ||
      this.testForm.get(field).untouched &&
      this.formSubmitted && this.testForm.get(field).errors
    );
  }

  onSubmit() {
    this.formSubmitted = true;
    if (this.testForm.valid) {
      alert('VALID');
    } else {
      alert('NOT VALID');
    }
  }

component.html

<form [formGroup]="testForm">
    <div class="form-group">
        <label>First Name:</label>
        <input type="text" formControlName="field1">
        <div *ngIf="isFieldValid('field1')">
            <div style="font-size: 12px; color: red">
                NOT VALID
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>Last Name:</label>
        <input type="text" formControlName="field2">
        <div *ngIf="isFieldValid('field2')">
            <div style="font-size: 12px; color: red">
                NOT VALID
            </div>
        </div>
    </div>
</form>
<div>
    <button (click)="onSubmit()">Submit</button>
</div>