angular4-forms - 如何在自定义组件 Angular 4 中访问表单验证
问题描述
我的表单有一个自定义组件:app-form
@Component({
selector: "app-form",
template: `
<form (ngSubmit)="onSubmit()">
<div class="row">
<ng-content></ng-content>
</div>
<button type="submit">Save</button>
</form>
`,
animations,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: FormComponent,
multi: true
}
]
})
我的输入有一个自定义组件:app-form-text
@Component({
selector: "app-form-text",
template: `
<div class="form-group"
[class.has-success]="nameval.valid && (nameval.dirty || nameval.touched)"
[class.has-danger]="nameval.invalid && (nameval.dirty || nameval.touched)">
<input type="text" class="form-control"
[class.form-control-success]="nameval.valid"
[class.form-control-danger]="nameval.invalid && nameval.dirty"
#nameval="ngModel" [name]="nameval" maxlength="250" minlength="2" [(ngModel)]="value"
required [appNmsValidators]='ValidationType'>
<div *ngIf="nameval.errors && (nameval.dirty || nameval.touched)">
<p *ngIf="nameval.errors.required">{{ReqErMsg}}</p>
<p *ngIf="nameval.errors.minlength">{{MinErMsg}}</p>
<p *ngIf="nameval.errors.appNmsValidators">{{Cu1ErMsg}}</p>
</div>
<small class="form-text text-muted"></small>
</div>
`,
animations,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: FormTextComponent,
multi: true
}
]
})
我使用它们如下:
<app-form [FormName]="'BaseCodeForm'">
<div class="col-md-6">
<app-form-text required name="typeCode"
[(ngModel)]="BaseCodeModel.typeCode">
</app-form-text>
</div>
<div class="col-md-6">
<app-form-text required name="descCode"
[(ngModel)]="BaseCodeModel.descCode">
</app-form-text>
</div>
</app-form>
如何在 app-form 组件中访问表单验证?
解决方案
在 app-form 组件中,您应该尝试使用 @ViewChild 注入 NgForm 实例
@ViewChild(NgForm) form: NgForm;
它应该可以在 ngOnInit() 方法中访问
推荐阅读
- android - java.lang.IllegalStateException: WorkManager 已经初始化。即使工作管理器未初始化
- google-pay - 在 Google 支付网关中没有可用于此商家的可接受的卡
- three.js - React-three-fiber extrudeBufferGeometry 不受灯光影响
- c# - c#文件夹的getFiles上的“系统调用级别不正确”
- java - 为了用户输入的错误响应?
- reactjs - 当: { props } = this 是什么意思
- javascript - 图像的相对路径受到 routify 中嵌套路由的影响
- c - 使用 C 生成 Mandlebrot 集 (DISLIN)
- kubernetes - 为什么即使节点关闭,Pod 仍显示正在运行?
- pine-script - 策略关闭 pinescript