2016-02-26 34 views
5

Q1. E 'possibile avere un controllo cioè:ngControllo con ngPer in Angular2

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

per convalidare tutti i tipi simili di input campi nel modello?

Q2. Questi campi possono essere generati da ngFor?


FailedMethod 1: convalida funziona ma i valori sono accoppiati.

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

FailedMethod 2: Con FormBuilder è come sopra.

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

Obiettivo Chiarimento:

  • sto cercando di convalidare i campi del modulo che potrebbero essere generati con ngFor e richiedono la convalida simili.

  • Senza definire Controlli simili ripetutamente altrove.

  • Valori che posso estrarre con qualsiasi altro metodo come #form="ngForm" o ngModel, tutto quello che desidero da ngControl è Convalida.

risposta

3

È anche possibile generare i controlli quindi non ci sono problemi.

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

(codice non testato)

controls deve essere aggiornato quando controlNames modifiche. ngOnInit() viene eseguito solo una volta.

+0

È piacevole per gli occhi, ho anche codificato qualcosa di simile a "mentalmente", ma sto anche provando a non eseguire il loop altrove a parte il modello di ngFor, ecco dove sta la vera sfida, penso. –

+1

È possibile spostare il codice 'ValidNumber = new Control ('', CustomValidators.number ({min: 1, max: 10}))' in una direttiva, quindi è possibile utilizzare l'iterazione '' ngFor' e non è necessario un altro nel tuo codice. –

+2

Per la versione corrente di Angular2 (2.2.x), Control dovrebbe essere FormControl e [ngFormControl] dovrebbe essere [formControl] – isevcik

Problemi correlati