2017-02-15 8 views
0

、それを使用していない私は、公式サンプルとNG2反応フォームを学んでいます:onValueChanged(データ:はなぜonvalueChangedに反応型のサンプルパスデータを行いますが

https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#live-example

は、定義されたメソッドを見たことがありますか? :any){

データは渡される可能性がありますが、メソッド内で使用されることはありませんか?

なぜそれ以上の行を購読するのですか? =>

this.heroForm.valueChanges 
     .subscribe(data => this.onValueChanged(data)); 

誰も私にこの奇妙なコードを教えてもらえますか?

ngOnInit(): void { 
    this.buildForm(); 
    } 

    buildForm(): void { 
    this.heroForm = this.fb.group({ 
     'name': [this.hero.name, [ 
      Validators.required, 
      Validators.minLength(4), 
      Validators.maxLength(24), 
      forbiddenNameValidator(/bob/i) 
     ] 
     ], 
     'alterEgo': [this.hero.alterEgo], 
     'power': [this.hero.power, Validators.required] 
    }); 

    this.heroForm.valueChanges 
     .subscribe(data => this.onValueChanged(data)); 

    this.onValueChanged(); // (re)set validation messages now 
    } 


    onValueChanged(data?: any) { 
    if (!this.heroForm) { return; } 
    const form = this.heroForm; 

    for (const field in this.formErrors) { 
     // clear previous error message (if any) 
     this.formErrors[field] = ''; 
     const control = form.get(field); 

     if (control && control.dirty && !control.valid) { 
     const messages = this.validationMessages[field]; 
     for (const key in control.errors) { 
      this.formErrors[field] += messages[key] + ' '; 
     } 
     } 
    } 
    } 

    formErrors = { 
    'name': '', 
    'power': '' 
    }; 

    validationMessages = { 
    'name': { 
     'required':  'Name is required.XXX', 
     'minlength':  'Name must be at least 4 characters long.', 
     'maxlength':  'Name cannot be more than 24 characters long.', 
     'forbiddenName': 'Someone named "Bob" cannot be a hero.' 
    }, 
    'power': { 
     'required': 'Power is required.' 
    } 
    }; 
} 
+0

それは退屈です...誰かが理由なしでこの妥当な質問を閉じたいと思っています... – Pascal

答えて

0

たぶん著者は、あなたがそれを使用するために、データをサブスクライブすることができることを示したかったが、それは完全に肉付け例ではありません。

この場合、データ変数が使用されていないことを心配しないでください。これは単なる例です。その背後には追加の意味はなく、コードの他の部分には副作用はありません。

0

When - this.rentApartmentForm.valueChanges.subscribe(data => this.onValueChanged(data));コードサンプルは、もはやvalidationMessagesを見つけて表示しません。検証エラーは認識されますが、メッセージは表示されません。 typescriptのエラーは、 'データ'が両方の式に一致していなければならないと言っています。

このコードサンプルではエラーがあります。さらに下の式では、(control.errorsのconstキーのために)Typescriptは "control.errorsがnullである可能性があります"と述べています。

この式がコード内にある場合、ページはロードされません(角度4.4.3を使用)。「おそらくnull」に関するコンソールエラーが表示されます。コメントアウトすると、ページは読み込まれますが、validationMessagesは表示されません。開発環境では、行を追加し直すことができます。すべて動作し、コンソールエラーは表示されず、ユーザーのvalidationMessagesが表示されます。

何かが混乱しています。誰にどのような変更を加える必要があるかを知っていますか?

関連する問題