CODEWITHSUNDEEP
angular
angry kiwi
angry kiwi

Reputation: 11485

Angular 2 - form validation fail

I got form like this

import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
    template: `
        <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" novalidate>
            <textarea (keyup)="valuechange($event)" #input  name="detail" id="detail" formControlName="detail"></textarea>
            <div *ngIf="formGroup.controls['detail'].dirty && formGroup.controls['detail'].invalid">This is required</div>

            <button type="submit">Post</button>
        </form>
    `,
})
export class CreateDiscussionComponent implements OnInit, AfterViewInit {
    constructor(
    ) {
        this.formGroup = new FormGroup({
            detail: new FormControl('', [Validators.required, Validators.minLength(2) ]),
        });
    }
    onSubmit(): void {
        this.submitted = true;
        console.log(this.formGroup.value)
    }
}

It has a single textarea. What it does is if input is not empyty, submit when click submit

Problem: the form will submit even textarea is empty.

Upvotes: 2

Views: 623

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

You could add disabled attribute to your element

<button type="submit" [disabled]="!formGroup.valid" >Post</button>

Your error message isn't appearing because you had used formGroup.controls['detail'].dirty && formGroup.controls['detail'].invalid condition, where you're first verifying form is dirty or not && it should be invalid. This condition will never satisfied if user directly submit a form without touching any field.

Better you can call onSubmit method when formGroup is valid.

(ngSubmit)="formGroup.valid && onSubmit()"

Upvotes: 3

Igor Janković
Igor Janković

Reputation: 5532

You can pass the form instance to the onSubmit() and then check if form is valid.

HTML:

(ngSubmit)="onSubmit(formGroup)"

TypeScript:

onSubmit(form) {
    if(form.invalid){
       return;
    }
    this.submitted = true;
    console.log(this.formGroup.value)
}

Upvotes: 2

Related Questions