角度5 - リアクティブフォームが提出

Question

にフォームを検証しません、私は以下のように簡単なフォームを持っている：

some.component.html

<form class="example-form" novalidate (ngSubmit)="onSubmit()" autocomplete="off" [formGroup]="testform"> 
    <input type="text" formControlName="name" class="form-control" placeholder="Enter name" required/> 
    <app-show-errors [control]="claimform.controls.name"></app-show-errors> 
    <button type="submit" (click)="onSubmit()">Next</button> 
</form> 

some.component.ts

を

ngOnInit() { 
    this.testform= new FormGroup({ 
     name: new FormControl('', { validators: Validators.required}) 
    }, {updateOn: 'submit'}); 
} 

onSubmit() { 
    if (this.testform.valid) { 
     alert('saving data'); 
    } else { 
     this._validationService.validateAllFormFields(this.testform); 
    } 
} 

validationService.ts

validateAllFormFields(formGroup: FormGroup) { 
    Object.keys(formGroup.controls).forEach(field => { 
     const control = formGroup.get(field); 
     if (control instanceof FormControl) { 
     control.markAsTouched({ onlySelf: true }); 
     } else if (control instanceof FormGroup) { 
     this.validateAllFormFields(control); 
     } 
    }); 
} 

Reference

---

問題

フォームはvalidate on submit場合は空白のままになりますが、それでも私はthis.testform.validをチェックしたときに値を充填した後、それは、falseを返します。しかしupdateOn:'submit'をformから削除した場合は、入力コントロールのblurを検証し、値を入力するとフォーム戻り値trueを検証します。 updateOnが正常に動作しているかどうか、またはこれを適切な方法で実装しているかどうかは不明です。誰かが私を正しい方向に向けることができますか？

<button type="submit" (click)="onSubmit()">Next</button> 

とフォームから：あなたのHTML内

Answer 1

あなたはボタンを提出から、onSubmit()機能には2つの呼び出しを持っている

<form class="example-form" 
     ovalidate 
     (ngSubmit)="onSubmit()" 
     autocomplete="off" 
     [formGroup]="testform"> 

最初の呼び出しがトリガされるボタンのトリガーであり、これはFormGroupのオプションを{updateOn: 'submit'}に設定しているので、実際に反応型を更新するという点では何もしません。トリガされる2番目の呼び出しはフォームのトリガで、実際のフォームの更新が行われます。ここで

FormGroupディレクティブの設定です：

@Directive({ 
    selector: '[formGroup]', 
    providers: [formDirectiveProvider], 
    host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'}, 
    exportAs: 'ngForm' 
}) 

我々はhostプロパティDOMフォームの提出で見ることができるように（フォーム内またはクリック焦点を当て、フォームのボタンを提出しながら、ENTER押すことでトリガー）onSubmit()関数を呼び出します：

onSubmit($event: Event): boolean { 
    (this as{submitted: boolean}).submitted = true; 
    syncPendingControls(this.form, this.directives); 
    this.ngSubmit.emit($event); 
    return false; 
} 

その後、syncPendingControls()関数を呼び出します：

export function syncPendingControls(form: FormGroup, directives: NgControl[]): void { 
    form._syncPendingControls(); 
    directives.forEach(dir => { 
    const control = dir.control as FormControl; 
    if (control.updateOn === 'submit' && control._pendingChange) { 
     dir.viewToModelUpdate(control._pendingValue); 
     control._pendingChange = false; 
    } 
    }); 
} 

最後にモデルを更新します。

だから、あなたの場合には、単に送信ボタンから(click)="onSubmit()"を削除します。

<button type="submit">Next</button> 

あなたはリアクティブフォームAPI validators: Validators.requiredを使用して、それを設定して、あなた以来以来、また、あなたが、あなたの入力にrequired DOM要素のプロパティを必要としませんフォームをnovalidateに設定すると、HTML5フォームの検証がキャンセルされます。