2016-02-26 3 views
5

Q1。テンプレート内inputフィールドのすべての同様のタイプを検証するためにngControl with Angular2

ValidNumber = new Control('', CustomValidators.number({min:1, max:10})) 

は、それが一つの制御 すなわちを持つことは可能ですか?

Q2。これらのフィールドはngForで生成できますか?


FailedMethod 1:検証が動作しますが、値が連結されています。

<input [ngFormControl]="ValidNumber" name="num1" type="number"/> 
<input [ngFormControl]="ValidNumber" name="num2" type="number"/> 

FailedMethod 2: formBuilderで、それは上記と同じです。

<form [ngFormModel]="formBuiltWithFormBuilder"> 
    <input ngControl="ValidNumber" name="num1" type="number"/> 
    <input ngControl="ValidNumber" name="num2" type="number"/> 
</from> 


目的の明確化:私はngFor で生成され、同様の検証を必要とする可能性があるフォームフィールドを検証しようとしている

  • 他の場所で同様のコントロールを繰り返し定義しないでください。

  • 値私はまたはngModelのような他の方法で抽出することができます。ngControlは妥当性検査です。

答えて

3

また、コントロールを生成することもできますが、問題はありません。

@Component({ 
    ... 
    template: ` 
... 
<input *ngFor="let c in controls" [ngFormControl]="c" name="c.name" type="number"/> 
... 
` 
}) 
class MyComponent { 
    // initialization with `['a', 'b', 'c']` just for demo purposes 
    // these values probably come from outside - hence @Input() 
    @Input() controlNames:string[] = ['a', 'b', 'c']; 

    controls: Control[]; 

    ngOnInit() { 
    this.controlNames.forEach(
     v => this.controls.push(
      new Control('', CustomValidators.number{min:1, max:10}) 
     ) 
    ); 
    } 
} 

ときcontrolNames変更更新する必要があるcontrols(コードテストしていない)

ngOnInit()は1回だけ実行されます。

+0

私はこのようなものを「精神的に」コード化しましたが、テンプレートのngFor以外にもループしないようにしようとしています。それは本当のチャレンジがあるところです。 –

+1

コード 'ValidNumber = new Control( ''、CustomValidators.number({{min:1、max:10}))'を指示文に移動すると、 '' ngFor'の繰り返しを使うことができます。あなたのコードのもう一つ。 –

+2

Angular2(2.2.x)の現在のバージョンでは、ControlはFormControlで、[ngFormControl]は[formControl] – isevcik