Question

我得到了这样的表格

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)
    }
}

它有一个textarea。它的作用是如果输入不是empyty，单击提交时提交

问题：即使textarea是空的，表单也会提交。

Answer 1

您可以为元素添加disabled属性

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

您的错误消息不会显示，因为您使用了formGroup.controls['detail'].dirty && formGroup.controls['detail'].invalid条件，您首先要验证表单是dirty还是&&它应该是invalid 1}}。如果用户在不触及任何字段的情况下直接提交表单，则此条件永远不会满足。

最好在onSubmit有效时调用formGroup方法。

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

Answer 2

您可以将表单实例传递给onSubmit（），然后检查表单是否有效。

HTML：

(ngSubmit)="onSubmit(formGroup)"

打字稿：

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

Angular 2 - 表单验证失败

2 个答案: