我对我的项目http://blog.rangle.io/angular-2-ngmodel-and-custom-form-components/实施了此解决方案,基本上,您使用表单元素构建了一个组件并将其放入表单中,我遇到的问题是当我想建立一个验证器来检查字段之间的依赖关系时 以常规模 ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我有一个使用angular 2的表单验证。[仅适用于Angular 2]如何使用以下方式启动验证部分?
app.component.html:
<form #registrationForm="ngForm" (ngSubmit)="submitform()">
<input type="text" class="form-control" name="name" formControlName="name" />
</form>
app.component.ts:
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder,FormGroup,Validators } from '@angular/forms';
export class AppComponent implements OnInit {
ngForm: FormGroup;
ngOnInit() {
this.ngForm = this._fb.group({
name: ['Select', Validators.required]
});
}
submitform() {
this.formSubmitted = true;
if (!this.ngForm.valid) {
alert("Form Not valid");
} else {
alert("Valid");
}
}
}
上面的脚本不起作用..我在哪里弄错了?
您的模板有问题。 代替使用#registrationForm="ngForm"
使用[formGroup]="ngForm"
您使用的是反应式表单方法,在这种情况下,要在模板上映射表单,在Component上映射表单,请在模板的form
标记上使用[formGroup]
。
#registrationForm="ngForm"
通常用于构建表单的模板驱动器策略中。 然后,在(submit)
您还将表单传递给在这种情况下并不需要的方法。
另外,您应该使用(submit)
而不是(ngSubmit)
尝试这个:
<form [formGroup]="ngForm" (submit)="submitform()">
<input type="text" class="form-control" name="name" formControlName="name" />
<button>Submit</button>
</form>
这是供您参考的示例StackBlitz 。
您要验证什么? 只有一个输入字段,如果要验证,请尝试在输入字段上放置“ required”属性或条件以进行验证。 另外,如果您需要看一下简单的表单验证示例,请检查以下存储库: https : //github.com/alokstar/Angular4FormValidation
希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.