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

它有一个文本区域。如果输入不是empyty，提交时点击提交

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

Answer 1

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

HTML：

(ngSubmit)="onSubmit(formGroup)" 

打字稿：

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

Answer 2

你可以disabled属性添加到您的元素

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

你的错误消息没有出现，因为你已经使用formGroup.controls['detail'].dirty && formGroup.controls['detail'].invalid条件，在你第一次验证形式dirty与否&&应该invalid。如果用户直接提交表单而不触及任何字段，则此条件永远不会满足。

---

更好

可以调用onSubmit方法时formGroup是有效的。

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