反应形式的离子输入/离子输入-ChangeDetectionStrategy问题 [英] input / ion-input in reactive forms - problems with ChangeDetectionStrategy

问题描述

我有以下用于多种形式的输入字段的模板(请忽略objToKeys-这是自定义管道，它可以工作):

I have following template for input fields in multiple forms (please ignore objToKeys - it is custom pipe and it works) :

<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

I tried to get this template simplified by creating a custom component : 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中，输入内容用[formGroup]="form" 包装在div中.我不包装它，然后Angular抱怨formControl没有包含在formgroup内. 但是请注意，调用它的父组件具有[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>

那么，为什么一开始会有一些抱怨，我的解决方案正确吗?这是实现组件重用的好方法吗?

推荐答案

关于同一主题有几个问题.我在链接中发布了一个.在此网站上进行了详尽的搜索.显然，这是一个常见的错误.

There are several questions on the same topic. I posted one in the link.Do an exhaustive search on this site. Apparently it is a common error.

我的解决方案基于此博客通过Netanel Basal:

My Solution was based on this blog by Netanel Basal:

我将父组件上的ChangeDetectionStarategy更改为:changeDetection: ChangeDetectionStrategy.OnPush,

I changed the ChangeDetectionStarategy on the parent component to : changeDetection: ChangeDetectionStrategy.OnPush,

此更改消除了错误:

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

这篇关于反应形式的离子输入/离子输入-ChangeDetectionStrategy问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！