反应形式的输入/离子输入 - ChangeDetectionStrategy 的问题
[英] input / ion-input in reactive forms - problems with ChangeDetectionStrategy
本文介绍了反应形式的输入/离子输入 - ChangeDetectionStrategy 的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下多种形式的输入字段模板(请忽略 objToKeys - 它是自定义管道并且可以工作):
<离子项目><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 }}</离子标签>
我尝试通过创建自定义组件来简化此模板:component.ts
import { Component, OnInit, Input } from '@angular/core';从@angular/forms"导入{FormGroup};@成分({选择器:应用程序表单输入",templateUrl: './form-input.component.html',styleUrls: ['./form-input.component.scss'],})导出类 FormInputComponent 实现 OnInit {@Input() 标签:字符串;@Input() 控件名称:字符串;@Input() 表单:FormGroup;构造函数(){}ngOnInit() {}}
component.html
<离子项目><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 }}</离子标签>
请注意,在上面的html中,输入用[formGroup]="form"
包裹在一个div中.我没有包装它然后 Angular 抱怨 formControl 没有包含在表单组中.但是请注意,调用它的父组件具有 [formGroup] 属性.
那么为什么一开始 angular 会抱怨,我的解决方案是否正确?这是实现组件重用的好方法吗?
解决方案
有几个关于同一主题的问题.我在链接中发布了一个.在这个网站上进行详尽的搜索.显然这是一个常见的错误.
我的解决方案基于此博客 作者:Netanel Basal:
我将父组件上的 ChangeDetectionStarategy 更改为:changeDetection: ChangeDetectionStrategy.OnPush,
此更改消除了错误:
表达式在检查后发生了变化.以前的值:'ng-valid:true'.当前值:'ng-valid: false'
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>
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>
Please note that in the above html, the input is wrapped in a div with [formGroup]="form"
. I I do not wrap it then Angular complains that the formControl is not enclosed inside the formgroup. However note that the parent component that calls it, has the [formGroup] attribute.
<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>
So why was angular complaining initially, is my solution correct? Is this a good way to achieve component reuse?
解决方案
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.
My Solution was based on this blog by Netanel Basal:
I changed the ChangeDetectionStarategy on the parent component to : changeDetection: ChangeDetectionStrategy.OnPush,
This change got rid of the error:
Expression has changed after it was checked. Previous value: 'ng-valid: true'. Current value: 'ng-valid: false'
这篇关于反应形式的输入/离子输入 - ChangeDetectionStrategy 的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!