角2 - 表單驗證失敗

我得到的表單如角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) 
    } 
}

它有一個文本區域。如果輸入不是empyty，提交時點擊提交

問題：表單會提交，即使textarea是空的。

來源

2017-02-27 angry kiwi

您可以將表單實例傳遞給onSubmit（），然後檢查表單是否有效。

HTML：

(ngSubmit)="onSubmit(formGroup)"

打字稿：

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

來源

2017-02-27 08:20:50

你可以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()"

來源

2017-02-27 07:45:43

我試過'disabled' ATTR，它給在控制檯黃色預警，稱殘疾人不應與反應形式使用。 –

提交'空值'後如何顯示錯誤信息？ –

角2 - 表單驗證失敗

回答

相關問題