2016-02-26 19 views
5

Q1. Czy to możliwe, aby jedna kontrolka tj:ngControl z ngFor w Angular2

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

aby potwierdzić wszystkie podobny typ input pól w szablonie?

Q2. Czy te pola mogą być generowane przez ngFor?


FailedMethod 1: działa Validation ale wartości są połączone.

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

FailedMethod 2: Z FormBuilder to samo co wyżej.

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

Cel Wyjaśnienie:

  • Próbuję walidacji pól formularza, które mogą być generowane z ngFor i wymagają podobnych walidacji.

  • Bez definiowania podobnych elementów sterujących wielokrotnie w innym miejscu.

  • Wartości, które mogę wyodrębnić dowolną inną metodą, taką jak #form="ngForm" lub ngModel, wszystko czego chcę od ngControl jest sprawdzanie poprawności.

Odpowiedz

3

Można również generować kontrolki, wtedy nie ma problemu.

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

(kod nie testowane)

controls musi być aktualizowany, gdy controlNames zmian. ngOnInit() działa tylko raz.

+0

To jest miłe dla oka, zakodowałem coś podobnego "mentalnie", ale staram się również nie zapętlać gdzie indziej niż szablon ngFor, to jest miejsce, w którym stoi prawdziwe wyzwanie. –

+1

Możesz przenieść kod 'ValidNumber = new Control ('', CustomValidators.number ({min: 1, max: 10}))) do dyrektywy, następnie możesz użyć iteracji' 'ngFor' i nie potrzebujesz kolejny w twoim kodzie. –

+2

Dla aktualnej wersji Angular2 (2.2.x), kontrola powinna być FormControl, a [ngFormControl] powinna być [formControl] – isevcik