Angular 6 Проверка шаблона вложенной группы форм

Моя структура группы форм выглядит так (order.component.ts):

this.orderForm = this.formBuilder.group({
  customer: this.formBuilder.group({
    name: ['', Validators.required],
    phone: ['', Validators.required],
    email: ['', Validators.required]
  }),
  ...
});

В шаблоне (order.component.html) у меня есть:

<form [formGroup]="orderForm" (ngSubmit)="onSubmit()">
  <fieldset formGroupName="customer">
    <legend>Customer Information</legend>
    <label for="name">Full name:</label>
    <input type="text" formControlName="name" class="form-control" name="name" id="name" required>
    <small class="form-text text-danger" *ngIf="orderForm.controls['customer'].controls['name'].invalid && (orderForm.controls['customer'].controls['name'].dirty || orderForm.controls['customer'].controls['name'].touched)">Name invalid</small>
  </fieldset>
  ...
</form>

Это работает, но является ли более коротким способом выражения orderForm.controls['customer'].controls['name']? Например, было бы более кратким, чтобы условие *ngIf было "name.invalid && (name.dirty || name.touched)"


angular angular6 angular-template
person Alex Mohr    schedule 21.07.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Да, это правильный способ получить вложенную форму Control, а не ярлык.

или вы можете создать какое-то свойство в своем компоненте, которое указывает на объект формы orderForm.get('customer')

private customerForm : FormGroup

И назначьте его после инициализации формы

this.customerForm = this.orderForm.get('customer')

и получить его как {{customerForm.get('name').valid}}

person Amit Chigadani    schedule 21.07.2018
comment
Я полагаю, что мог бы сделать еще один шаг и добавить private customerName: FormControl и установить его после инициализации. Однако это не очень помогает для FormControls, динамически добавляемых в FormArray. - person Alex Mohr; 21.07.2018
comment
В этом случае вы можете сделать customerControls : FormControl[], просто продолжайте нажимать на него ссылки, проиндексированные по имени formControl. - person Amit Chigadani; 21.07.2018

arrow_upward
3
arrow_downward

Я столкнулся с той же проблемой. Моя основная проблема заключалась в том, что ng build --prod терпит неудачу при использовании orderForm.controls['customer'].controls['name'] с ошибкой:

Свойство «controls» не существует для типа «AbstractControl».

По-видимому, это проблема типа, когда шаблон компилируется в TS.

Мой подход состоит в том, чтобы создать геттер для группы вложенных форм и указать правильный тип, который решает как мою проблему, так и вашу:

get customer() {
  return this.orderForm.controls.customer as FormGroup;
}

используется в HTML:

<small class="form-text text-danger" *ngIf="customer.controls['name'].invalid && (customer.controls['name'].dirty || customer.controls['name'].touched)">Name invalid</small>
person Martin Nuc    schedule 03.05.2019
comment
Это ответ на то, на что я потратил более двух часов. Это просто работает! - person Gayan Prasanna; 31.12.2020