Reputation: 11485
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
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
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