角度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でない場合は、submitをクリックして送信してください

問題：フォームは、テキストエリアも空です。あなたの要素に

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

をdisabled属性を追加することができ

Answer 1

フォームインスタンスをonSubmit（）に渡し、フォームが有効かどうかを確認できます。

HTML：

(ngSubmit)="onSubmit(formGroup)" 

は活字体：

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

Answer 2

あなたが最初にフォームを確認しているが、それはinvalidあるべきdirtyか&&あるformGroup.controls['detail'].dirty && formGroup.controls['detail'].invalid条件を、使用していたので、あなたのエラーメッセージが表示されません。ユーザーがフィールドに触れることなく直接フォームを送信すると、この条件は満たされません。 formGroupが有効であるとき、より良い

---

あなたはonSubmitメソッドを呼び出すことができます。

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