Проверка формы с помощью ngModel и ngModelOption в angular 8 - PullRequest
Новая
       41

Проверка формы с помощью ngModel и ngModelOption в angular 8

1 голос
/ 04 февраля 2020

Я использую angular 8 с formGroup и formController для валидации, которая отлично работает как с реактивной, так и с управляемой шаблоном формой. Однако я пытался использовать «ngModel» в angular 8 с атрибутами «ngModelOptions» (это динамически генерируемые поля). Он правильно показывает проверки на уровне поля с атрибутом «required», но я не могу предотвратить нажатие кнопки или отключить «кнопку» в состоянии проверки ошибок. Пример кода приведен ниже: 

<form [formGroup]="myForm" #form1="ngForm">
 <!-- few formControlName fields here -->
<mat-form-field>
   <input matInput [(ngModel)]="firstname" [ngModelOptions]="{standalone: true}" [placeholder]="First name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field>
   <input matInput [(ngModel)]="lastname" [ngModelOptions]="{standalone: true}" [placeholder]="Last name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<button mat-button [disabled]="!(form1.form.valid)">Submit</button>
</form>

Кнопка отправки никогда не отключается, несмотря на пустые поля имени и фамилии. Я понимаю, когда вы помечаете его как автономный: true этого не произойдет (он не будет добавлен в FormGroup). Но есть ли обходной путь или другие подходы, в которых я могу добиться проверки ngModel, чтобы ограничить отправку формы на кнопку?

1 Ответ

0 голосов
/ 04 февраля 2020

если вы поместите в тот же тег 

<form [formGroup]="myForm" #form1="ngForm">

"form1" - это myForm, а "firstName" и "lastName" не принадлежат myForm.

если вы используете 

[ngModelOptions]="{standalone: true}"

ваши данные не принадлежат ни к какой форме.

Вы можете добавить в свои входные данные # firstnameID = "ngModel" и # lastnameID = "ngModel" и спросить о firstnameID.valid и lastnameID.valid 

<form [formGroup]="myForm" #form1="ngForm">
 <!-- few formControlName fields here -->
<mat-form-field>
   <input matInput [(ngModel)]="firstname" 
        #firstnameID="ngModel"
        [ngModelOptions]="{standalone: true}" 
        placeholder="First name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field>
   <input matInput [(ngModel)]="lastname" 
       #lastnameID="ngModel"
       [ngModelOptions]="{standalone: true}" 
       placeholder="Last name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<button mat-button [disabled]="!(myForm.valid) ||
                               !firstnameID.valid ||
                               !lastnameID.valid">Submit</button>
</form>

ПРИМЕЧАНИЕ: я полагаю, что это не так ответ, который вы ожидаете, но это так

...