angular - ngForm 与 Angular 6 中的验证和子组件
问题描述
我有一个表格
<form #basic="ngForm">
<div>
<label>Firstname:</label>
<input type="text" name="firstName" ngModel required>
</div>
<div>
<label>Lastname:</label>
<input type="text" name="lastName" ngModel>
</div>
<address ></address>
</form>
并且在那种形式中有一个子组件 <address>
,我想要验证父组件和子组件。我想用ngForm来做,我知道如何用formgroups来做,通过将表单变量传递给子组件,但我也试过了,但它给我一个错误
子组件
import { Component, Input } from '@angular/core';
@Component({
selector: 'address',
template: `
<div>
<label>Zip:</label>
<input [ngClass]="{error: (basic.submitted)}" type="text" name="zip" ngModel>
</div>
<div>
<label>Street:</label>
<input type="text" name="street" ngModel required>
</div>
<div>
<label>City:</label>
<input type="text" name="city" ngModel>
</div>
`,
})
export class AddressComponent {
}
解决方案
您需要像这样将表单变量传递给子组件
<form #basic="ngForm">
<div>
<label>Firstname:</label>
<input type="text" name="firstName" ngModel required>
</div>
<div>
<label>Lastname:</label>
<input type="text" name="lastName" ngModel>
</div>
<address [basic]="basic"></address>
</form>
处理该变量并在子组件中导入 ControlContainer 和 NgForm
import { Component, Input } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'address',
template: `
<div>
<label>Zip:</label>
<input [ngClass]="{error: (basic.submitted)}" type="text" name="zip" ngModel>
</div>
<div>
<label>Street:</label>
<input type="text" name="street" ngModel required>
</div>
<div>
<label>City:</label>
<input type="text" name="city" ngModel>
</div>
`,
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class AddressComponent {
@Input() basic;
}
现在它将处理组件父组件和子组件的验证。
推荐阅读
- azure - 在 Azure ML 中将本地计算与 Estimator 结合使用
- visual-studio - 如何限制组织中的特定用户从我们的办公室 IP 外部访问 Azure DevOps
- android - Google WebRTC 是否支持 Cisco Open H.264?
- c# - 是否可以将短时区字符串作为 EST CET PST 转换为 C# 中的 TimeZoneInfo?
- php - 在输入字段上使用类属性声明值
- javascript - 不同系统中打印窗口的不同边距
- java - 可以使用杰克逊从内部 json 对象中获取字段吗?
- python - 为什么我的代码在 Eclipse 控制台中比在 Eclipse 的 PyDev Python 控制台中运行得更快?
- android - Ionic 3 - 未安装应用程序。包裹似乎已损坏
- android - 是否可以从 CameraPreview 中抓取一个像素?