2016-02-26 34 views
5

Q1. Ist es möglich, eine Kontrolle zu haben dh:ngControl mit ngFor in Angular2

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

alle ähnliche Art von input Felder in der Vorlage zu validieren?

Q2. Können diese Felder von ngFor generiert werden?


FailedMethod 1: Validierung funktioniert, aber Werte gekoppelt sind.

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

FailedMethod 2: Mit Formbuilder ist es gleich wie oben.

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

Ziel Klarstellung:

  • Ich versuche, Formularfelder zu validieren, die mit ngFor erzeugt werden könnten, und ähnliche Validierung erfordern.

  • Ohne ähnliche Kontrollen wiederholt anderswo zu definieren.

  • Werte, die ich mit jeder anderen Methode wie #form="ngForm" oder ngModel extrahieren kann, alles, was ich von ngControl will, ist Validierung.

Antwort

3

Sie können auch die Steuerelemente generieren, dann gibt es kein Problem.

@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}) 
     ) 
    ); 
    } 
} 

(Code nicht getestet)

controls Bedarf aktualisiert werden, wenn controlNames Änderungen. ngOnInit() läuft nur einmal.

+0

Es ist Auge erfreulich, ich habe auch etwas wie diese "mental" codiert, aber ich versuche auch nicht woanders als Vorlage NGFor Schleife, das ist, wo die eigentliche Herausforderung liegt, denke ich. –

+1

Sie können den Code 'ValidNumber = new Control ('', CustomValidators.number ({min: 1, max: 10}))' in eine Direktive verschieben, dann können Sie die '' ngFor'-Iteration verwenden und nicht benötigen ein anderes in deinem Code. –

+2

Für aktuelle Version von Angular2 (2.2.x) sollte Control FormControl sein und [ngFormControl] sollte [FormControl] – isevcik

Verwandte Themen