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

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

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

Проблема

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

введите описание изображения здесь

Вопрос

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

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


angular angular-material angular-material-6
person Raj    schedule 30.09.2018    source источник
comment
Использование группы форм - лучший способ определить, правильно ли заполнена группа полей формы. Вы видели это руководство? c-sharpcorner.com / article /   -  person jetset    schedule 30.09.2018
comment
В настоящий момент вы используете смесь шаблонных и реактивных форм, поэтому вам следует остановиться на одном пути.   -  person user184994    schedule 30.09.2018
comment
что вы имеете в виду под Когда я реализую FormBuilder или группу форм, материальные компоненты не будут отображаться должным образом? не могли бы вы уточнить это в первую очередь ... если вы выберете formGroup, все будет работать, как ожидалось   -  person Pankaj Parkar    schedule 30.09.2018
comment
@PankajParkar добавил скриншоты для справки. и код хранится в ссылках описания.   -  person Raj    schedule 01.10.2018
comment
@Raj можете ли вы проверить консольную ошибку, когда ваш дизайн ломается?   -  person Pankaj Parkar    schedule 01.10.2018

Ответы (1)


arrow_upward
3
arrow_downward

Вам следует начать с того, что ваши поля станут частью 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">

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

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

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

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

[disabled]="!addCategoryForm.valid"

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

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

person user184994    schedule 30.09.2018
comment
Спасибо, что нашли время и изучили это. Решение рабочее. : thumbsup: Но mat-error не отображает описание ошибки, когда валидация оценивается как false. Условие if вызывает ошибку. Есть идеи по этому поводу? - person Raj; 01.10.2018
comment
определение get cNameControl() { return this.categoryGroup.get('cNameControl'); } в классе компонентов и определение *ngIf="cNameControl.hasError('minLength')" сработало. :-) определение геттеров в реактивных формах - person Raj; 01.10.2018