Угловой материал 2 делит реактивную форму между компонентами - PullRequest
Новая
       10

Угловой материал 2 делит реактивную форму между компонентами

0 голосов
/ 08 мая 2018

У меня есть следующий шаблон компонента 

<form [formGroup]="form" (ngSubmit)="onSubmit()">

<section>
  <mat-form-field>
    <input matInput formControlName="firstName" placeholder="First name" />
  </mat-form-field>
</section>

<child-component [form]="form"></child-component>

<button type="submit" mat-raised-button color="primary">
  <span>Submit</span>
</button>

</form>

И следующий шаблон дочернего компонента 

<section [formGroup]="form">
  <mat-form-field>
    <input matInput formControlName="emailAddress" placeholder="Email address" />
  </mat-form-field>
</section>

Оба поля определены с использованием реактивного подхода в родительском компоненте и установлены в соответствии с требованиями.

При отправке формы только поле внутри родительского компонента имеет класс mat-form-field-invalid и отображается красным.

Однако оба поля кажутся недействительными в экземпляре FormControl.

Я создал следующий стек, чтобы воспроизвести проблему https://stackblitz.com/edit/angular-material2-issue-7x45bp

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Самый простой способ сделать это - передать FormControl вместо формы: 

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <section>
    <mat-form-field>
      <input matInput formControlName="firstName" placeholder="First name" />
    </mat-form-field>
  </section>

  <child-component [childControl]="form.get('emailAddress')"></child-component>

  <button type="submit" mat-raised-button color="primary">
    <span>Submit</span>
  </button>

</form>


<section>
  <mat-form-field>
    <input matInput [formControl]="childControl" placeholder="Email address" />
  </mat-form-field>
</section>

На самом деле это лучше для повторного использования компонента (если вы также делаете заполнитель свойством).

В противном случае вам, возможно, потребуется, чтобы ваш дочерний компонент реализовал ControlValueAccessor.

0 голосов
/ 08 мая 2018

Если я не ошибаюсь, ваши недопустимые поля формы будут отображаться красным цветом только после того, как они будут помечены как затронутые, что вы можете принудительно запрограммировать при отправке формы (если хотите) (просто не очень элегантно, Реактивные формы - пометить поля как прикосновенные ).

В ваших обязательных полях отсутствует звездочка, которая обычно существует рядом с именем поля формы, чтобы визуально указать, что это поле является обязательным. Чтобы добавить это просто добавьте required="true" или альтернативно [required]="someFunctionThatChecksFieldHasRequiredValidatorInFormGroup(fieldName)"

...