Angular 角度2-表单验证失败

我有这样的表格

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

从'@angular/forms'导入{FormControl，FormGroup，Validators}；
@组成部分({
模板：`
这是必需的
邮递
`,
})
导出类CreateDiscussionComponent实现OnInit，AfterViewInit{
建造师(
) {
this.formGroup=新的formGroup({
详细信息：新表单控件（“”，[Validators.required，Validators.minLength（2）]），
});
}
onSubmit（）：void{
this.submitted=true；
console.log（this.formGroup.value）
}
}

它只有一个文本区域。它所做的是，如果输入不是临时的，请在单击“提交”时提交

---

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

您可以将

禁用属性添加到元素中

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

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

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

HTML:

打字稿：

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

我尝试了
disabled
attr，它在控制台中给出了一个黄色警告，表示disabled不应与被动形式一起使用。在提交
空值后显示错误消息如何？
onSubmit(form) {
    if(form.invalid){
       return;
    }
    this.submitted = true;
    console.log(this.formGroup.value)
}