Как проверить угловую форму, имея поле формы материала? - PullRequest
Новая
       11

Как проверить угловую форму, имея поле формы материала?

0 голосов
/ 30 сентября 2018

У меня есть форма, которая использует поля формы материала Angular.Я хочу отключить кнопку отправки, пока все элементы управления формы не будут заполнены соответствующим значением.(код дан в виде ссылок в описании)

Когда я использую компоненты материала в шаблоне (код) , а определяют элементы управления (код) в компонентах, этоэто выход.ok

Проблема

Когда я реализую FormBuilder или группу форм в шаблон и в компонент , компоненты материалане будет отображаться правильно.

enter image description here

Вопрос

Как отключить / включить кнопку отправки, только если весь материал поля формы оцениваются как истинные

Заранее спасибо.

1 Ответ

0 голосов
/ 30 сентября 2018

Вы должны начать с того, чтобы сделать свои поля частью FormGroup, например так: 

group = new FormGroup({
  cNameControl: new FormControl('', [Validators.required, Validators.minLength(3)]),
  cDescControl: new FormControl('', [Validators.required])
})

Теперь вы можете указать тег form на вашей группе форм: 

<form class="example-container" #addCategoryForm="ngForm"  [formGroup]="group">

И наведите свои элементы управления на FormControl s: 

<input matInput placeholder="name" formControlName="cNameControl">

Обратите внимание, что [ вокруг formControlName нет, потому что мы используем строковый литерал

Наконец, измените свой тег disabled, чтобы он был отключен, если форма не действительна: 

[disabled]="!addCategoryForm.valid"

Со всем этим вместе, это должно работать.

Вот демонстрация StackBlitz

...