我已经实现了模型驱动的表单 这个演示。如果用户没有输入任何内容并提交表单，我将使用此逻辑显示错误消息
<div *ngIf="(!myForm.find('sku').valid && submitted)">**sku is required</div>
我传递一个布尔变量'submitted'来检查控件在提交时是否有效。有没有办法检查控件的状态而不手动传递变量？ Angular2表单为我们提供了6个类 ng-touched， ng-untouched， ng-valid， ng-invalid， ng-pristine，和 ng-dirty。我想仅使用这些类来显示错误消息。
我知道这个问题是很久以前发布的，但我遇到了同样的问题，我想利用角度控制状态，所以发现这个工作正常：
首先，如果控件不是原始的，我会显示错误：
<span class="help-block"
*ngIf="request.get('control').hasError('required') &&
!request.get('control').pristine">
This field is required!
</span>
然后你可以通过所有控件并在onSubmit函数中将它们标记为脏：
onSubmit() {
//validations
this.form.updateValueAndValidity();
if (this.form.invalid) {
Object.keys(this.form.controls).forEach(key => {
this.form.get(key).markAsDirty();
});
return;
}
//call function for saving data
this.save(this.form.value);
}
希望这可以帮助
是...
你可以查一下 Angular form control's state 如此处所示。
import {Component,View,bind} from 'angular2/core';
import {FORM_DIRECTIVES,CORE_DIRECTIVES,FormBuilder, Validators } from 'angular2/common';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'my-app',
template: `
<h1>LOGIN</h1>
<form [ngFormModel]="loginForm" #fm="ngForm" (submit)="doLogin($event)">
<input ngControl="name" type="text" placeholder="Your name" #name="ngForm" required>
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">Name is required</div>
<br/>
<div>Valid ={{name.valid}}</div>
<div>Pristine ={{name.pristine}}</div>
<div>Touch ={{name.touched}}</div>
<BR/><BR/>
<input ngControl="password" type="password" placeholder="Your password" #password="ngForm" required>
<div [hidden]="password.valid || password.pristine" class="alert alert-danger">password is required</div>
<br/>
<div>Valid ={{password.valid}}</div>
<div>Pristine ={{password.pristine}}</div>
<div>Touch ={{password.touched}}</div>
<BR/><BR/>
<button type="submit" [disabled]="!loginForm.valid">Log in</button>
</form>
`,
directives: [ROUTER_DIRECTIVES,FORM_DIRECTIVES,CORE_DIRECTIVES]
})
export class Login {
constructor(fb: FormBuilder) {
this.loginForm = fb.group({
name: ["", Validators.required],
password: ["", Validators.required]
});
}
doLogin(event) {
console.log(this.loginForm);
event.preventDefault();
}
}
不要忘记单击登录按钮以在浏览器控制台中检查与表单关联的不同对象。而且我试图绑定 valid-invalid strip 到我以前实现的文本框中 Angular1。我希望这肯定会对你有所帮助。
我会利用 pristine 和/或 touched 特性：
pristine 属性touched 属性这是一个示例：
<div *ngIf="(!myForm.controls.sku.valid && !myForm.controls.sku.pristine)">
**sku is required
</div>
希望它能帮到你， 蒂埃里
我需要在顶部显示一个验证横幅，显示提交时的所有表单验证错误，并且仅在提交时显示，这听起来像是您尝试做的事情。
目前运行ng2 beta 17并且该框架不会阻止提交无效表单。浏览器将阻止提交所需的html验证，但任何其他自定义验证器都不会阻止表单提交。
我的方法最终是让验证摘要标题处理表单提交，并在成功时回调父级。如果表单无效，则横幅显示摘要并且不回调。
表单设置
<form (ngSubmit)="validationSummary.submit()" [ngFormModel]="myForm">
<div #validationSummary form-validation-summary [form]="myForm" [validSubmitCallback]="validSubmitCallback"></div>
...
<button type="submit" value="SaveButton" class="Button">Save</button>
</form>
页面与表单
export class SomeComponent implements OnInit {
...
public validSubmitCallback: Function;
ngOnInit() {
this.validSubmitCallback = this.myFormSubmit.bind(this);
}
myFormSubmit() {
alert("a valid form was submitted");
}
}
验证摘要
@Component({
selector: '[form-validation-summary]'
...
export class FormValidationSummary {
@Input() public form: ControlGroup;
@Input() public validSubmitCallback: Function;
...
submit() {
if (this.form.valid) {
this.validSubmitCallback();
} else {
this.formSubmitted = true;
}
}
}
与在表单上添加提交相关： https://github.com/angular/angular/issues/2960
我创建了ng-message的angular 2版本。
语法与ng-message非常相似：
<form [formGroup]="formGroup">
<label for="phoneNumber">Phone Number</label>
<input type="text" id="phoneNumber" name="phoneNumber" formControlName="phoneNumber" required>
<cl-ng-messages [control]="formGroup.get('phoneNumber')">
<template clNgMessage="required">
This is required
</template>
<template clNgMessage="pattern">
the format of phone number is not correct
</template>
</cl-ng-messages>
</form>