Angular 2 - 表单验证失败

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

它有一个文本区域。它的作用是如果输入不为空，则点击提交时提交

问题:即使文本区域为空，表单也会提交。

Answer 1

您可以向元素添加 disabled 属性

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

您的错误消息没有出现，因为您使用了 formGroup.controls['detail'].dirty && formGroup.controls['detail'].invalid 条件，您首先要在其中验证表单是脏或不是&&，它应该是无效。如果用户直接提交表单而不触摸任何字段，则永远不会满足此条件。

---

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

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