вход / ионный ввод в реактивных формах - проблемы с ChangeDetectionStrategy - PullRequest
Новая
       58

вход / ионный ввод в реактивных формах - проблемы с ChangeDetectionStrategy

0 голосов
/ 04 мая 2020

У меня есть следующий шаблон для полей ввода в нескольких формах (пожалуйста, игнорируйте objToKeys - это пользовательский канал и он работает): 

<div [formGroup]="form">
  <ion-item>
    <ion-label color="primary" position="floating">{{ label }}</ion-label>

    <ion-input type="text" formControlName="{{ controlName }}"></ion-input>
  </ion-item>

  <div *ngIf="form.controls[controlName].touched && form.controls[controlName].errors" class="form-error-messages">
    <div *ngFor="let key of form.controls[controlName].errors | objToKeys">
      <ion-icon color="danger" name="alert-outline"></ion-icon>
      <ion-label class="ion-padding-start" color="danger" class="ion-align-items-end">
        {{ form.controls[controlName].errors[key].message }}
      </ion-label>
    </div>
  </div>
</div>

Я попытался упростить этот шаблон, создав собственный компонент: component.ts 

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-form-input',
  templateUrl: './form-input.component.html',
  styleUrls: ['./form-input.component.scss'],
})
export class FormInputComponent implements OnInit {
  @Input() label: string;
  @Input() controlName: string;
  @Input() form: FormGroup;
  constructor() {}

  ngOnInit() {}
}

component. html

<div [formGroup]="form">
  <ion-item>
    <ion-label color="primary" position="floating">{{ label }}</ion-label>
    <ion-input type="text" formControlName="{{ controlName }}"></ion-input>
  </ion-item>
  <div *ngIf="form.controls.name.touched && form.controls.name.errors" class="form-error-messages">
    <div *ngFor="let key of form.controls.name.errors | objToKeys">
      <ion-icon color="danger" name="alert-outline"></ion-icon>
      <ion-label class="ion-padding-start" color="danger" class="ion-align-items-end">
        {{ form.controls.name.errors[key].message }}
      </ion-label>
    </div>
  </div>
</div>

Обратите внимание, что в приведенном выше html, вход обернут в div с [formGroup]="form". Я-я не оборачиваю его, тогда Angular жалуется, что formControl не заключен в группу формы. Однако обратите внимание, что родительский компонент, который вызывает его, имеет атрибут [formGroup]. 

<form [formGroup]="form" (ngSubmit)="onSubmit()" #formRef="ngForm">
  <app-form-input [label]="'Insitution Name'" [controlName]="'name'" [form]="form"></app-form-input>


  <app-actions
    slot="end"
    [itemType]="'summary'"
    [actionMode]="'answer'"
    [formMode]="formMode"
    (saveSummary)="submitForm()"
    (cancelSummary)="onCancel()"
  ></app-actions>
</form>

Итак, почему изначально angular жаловался, правильное ли мое решение? Это хороший способ добиться повторного использования компонента?

1 Ответ

0 голосов
/ 05 мая 2020

Есть несколько вопросов на одну и ту же тему c. Я разместил один в ссылке. Сделайте исчерпывающий поиск на этом сайте. Видимо это распространенная ошибка.

Мое решение было основано на этом блоге от Netanel Basal:

Я изменил ChangeDetectionStarategy на родительском компоненте на: changeDetection: ChangeDetectionStrategy.OnPush,

Это изменение избавился от ошибки:

Expression has changed after it was checked. Previous value: 'ng-valid: true'. Current value: 'ng-valid: false'

...