角2カスタムフォーム検証ではonSubmitが呼び出されないようにしていません

Question

おそらく私はばかだと思っていますが、検証が失敗したときにonSubmitを停止するカスタムフォーム検証を取得する方法を理解できません。私は、新しいコントロールを作成するときに、コードと同様に、フォームコンポーネントのhtmlTemplateにカスタム検証キーワードを直接追加することによって、両方のHTML構文を使用してみました。私もこの機能を提案して何も見ていないカスタムバリデータのために働くべきではない。

ここで私は、私は誰かが、これは正しく動作して取得する方法を私に示し、または認めていくつかのドキュメントの方に私を指すことができますいずれかを望んでいる

import { Component, Output, EventEmitter, OnInit } from 'angular2/core'; 
import { FORM_DIRECTIVES, FormBuilder, Control, ControlGroup} from 'angular2/common'; 

@Component({ 
    selector: 'formality-form', 
    templateUrl: 'html/formality.html', 
    styleUrls: ['styles.css'] 
}) 
export class FormalForm implements OnInit { 
    formGroup: ControlGroup; 

    // Here I register the custom validator to the Control group 
    constructor(fb: FormBuilder) { 
    this.formGroup = fb.group({ 
     'date': [''] 
    } {validator: FormalForm.customVal}); 
    } 

    // This is my custom validator 
    public static customVal(control: ControlGroup){ 
    return {isFail:true}; 
    } 

    // I would like for this to never be called, since the custom validator is in 
    // a state of perpetual fail. 
    onSubmit(): void { 
    console.log(this.formGroup.value); 
    alert('onSubmit called; formGroup.valid = ' + this.formGroup.valid); 
    } 
} 

And here's a link to the plunkr

を使用しているコードの例ですこれは私が期待しているようには機能しません。

フォームの有効性を確認する必要があります実際には

Answer 1

は、私は本当に馬鹿だが判明します。 required,minLength,maxLength、patternなどのバリデータは、すべて<input>要素の組み込み属性です。このため、フォーム提出を防ぐことができます：これはブラウザ固有のものです。一方、カスタムバリデーター（あなた自身を追加するもの）はAngularで管理されますが、は送信ボタンがクリックされたときにフォームがサブミットされるのを防ぐことができません。

これは、他の誰かが行を下ろすのに役立ちます。

Answer 2

：

• あなたonSubmit方法

  onSubmit(): void { 
      if (this.formGroup.valid) { // <----- 
      console.log(this.formGroup.value); 
      alert('onSubmit called; formGroup.valid = ' + this.formGroup.valid); 
      } 
  } 
  

で処理を実行しない送信ボタン

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

• を無効にするには

submitイベントは、送信ボタンをクリックすると常に起動されます。

その他の基準によっては、保留中の非同期検証のようなフォームを送信できない場合があります。

は、より多くの詳細については、こちらの記事を参照してください。

• http://restlet.com/blog/2016/02/22/implementing-angular2-forms-beyond-basics-part-3/