ngControl с ngFor в Angular2

Q1. Можно ли иметь один элемент управления, т.е.

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

проверить все похожие типы input поля в шаблоне?

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 и требуют аналогичной проверки.

  • Без определения аналогичных элементов управления неоднократно в другом месте.

  • Значения, которые я могу извлечь с помощью любого другого метода, например #form="ngForm" или же ngModelвсе, что я хочу от ngControl такое валидация

1 ответ

Решение

Вы также можете создать элементы управления, тогда нет проблем.

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

(код не проверен)

controls должен быть обновлен, когда controlNames изменения. ngOnInit() работает только один раз.

Другие вопросы по тегам