CODEWITHSUNDEEP
angular
Dhileepan S J
Dhileepan S J

Reputation: 295

Angular 2 : Required Validation is not showing

HTML :

<input type="text" id="txtFName" formControlName="firstName" required/>

<input type="submit" id="btnSubmit" value="Submit" (click)="save()"/>

component.ts :

ngOnInit(){
    this.regForm=this.formBuilder.group({
        firstName:['', Validators.required],
        lastName:['', Validators.required],
        eMail:['', Validators.required],
        DOB:['', Validators.required]
    })
}

    save():void
{
    console.log(this.regForm.value);
}

while clicking submit button, required validation is not arising.

Please let me know what is needed to be done

Upvotes: 1

Views: 60

Answers (2)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41407

you can make the submit button disable if the form is invalid 

<input type="submit" id="btnSubmit" value="Submit" (click)="save()" [disabled]="!form.valid"/> // form is the formGroup name

Or use an error msg

<input type="text" id="txtFName" formControlName="firstName" required/>
<div [hidden]="firstName.valid">Name Required</div>

Upvotes: 0

user4676340
user4676340

Reputation:

For the alert to the user : 

<div *ngIf="regForm.hasError('firstName', ['required'])">Required</div>

For validation

save() {
  if (this.regForm.invalid) { /* error */ }
}

Upvotes: 2

Related Questions