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)

  ]))

})

Believe it would be of help if you posted the code in the question too. — Ravindra HV
– Ravindra HV, Commented Sep 19, 2018 at 19:36
@Ravindra:I think radio button validation is not working properly — gayathri n
– gayathri n, Commented Sep 19, 2018 at 19:38
Use this code on submit button to validate Object.keys(formGroup.controls).forEach(key => { formGroup.get(key).markAsTouched(); formGroup.get(key).updateValueAndValidity(); }); — Sumit Kumar
– Sumit Kumar, Commented Sep 20, 2018 at 5:37

shubham singh · Accepted Answer · 2018-09-20 06:17:01Z

4

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

edited Sep 20, 2018 at 6:17

answered Sep 20, 2018 at 6:10

shubham singh

4003 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

faizan baig · Accepted Answer · 2018-09-20 05:25:12Z

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>

Collectives™ on Stack Overflow

Form validation error message show on submit in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related