是否可以创建一个可以使用多个值来确定我的字段是否有效的验证器?
例如,如果客户的首选联系方式是通过电子邮件,则应该要求电子邮件字段.
谢谢.
更新了示例代码...
import {Component, View} from 'angular2/angular2';
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
@Component({
selector: 'customer-basic',
viewInjector: [FormBuilder]
})
@View({
templateUrl: 'app/components/customerBasic/customerBasic.html',
directives: [formDirectives]
})
export class CustomerBasic {
customerForm: ControlGroup;
constructor(builder: FormBuilder) {
this.customerForm = builder.group({
firstname: [''],
lastname: [''],
validateZip: ['yes'],
zipcode: ['', this.zipCodeValidator]
// I only want to validate using the function below if the validateZip control is set to 'yes'
});
}
zipCodeValidator(control) {
if (!control.value.match(/\d\d\d\d\d(-\d\d\d\d)?/)) {
return { invalidZipCode: true };
} …Run Code Online (Sandbox Code Playgroud) 关于验证器与angular2的比较字段,请参阅此问题.不幸的是Angular 2改变了一点,所以解决方案似乎不再起作用了.这是我的代码:
import {IonicApp,Page,NavController,NavParams} from 'ionic/ionic'
import {Component} from 'angular2/core'
import {FORM_PROVIDERS, FormBuilder, Validators} from 'angular2/common'
import {ControlMessages} from '../../components/control-messages'
import {ValidationService} from '../../services/validation-service'
@Page({
templateUrl: 'build/pages/account/register.html',
directives: [ControlMessages]
})
export class RegisterPage {
constructor(nav:NavController,private builder: FormBuilder) {
this.nav = nav
this.registerForm = this.builder.group({
'name' : ['', Validators.required],
'email' : ['',Validators.compose([Validators.required, ValidationService.emailValidator])],
'password' : ['',Validators.required],
'repeat' : ['',this.customValidator]
}
)
}
register() {
alert(this.registerForm.value.password)
}
private customValidator(control) {
//console.log(this.registerForm.value.password)
//return {isEqual: control.value === this.registerForm.value.password} …Run Code Online (Sandbox Code Playgroud) 我想知道如何将以下形式的Validator设置为Required,仅当表单元素存在时:
<div *ngIf="form.controls.user.value !== 'Admin' && form.controls.user.value ">
<label>Role:</label>
<input type="text" ngControl="role">
</div>
Run Code Online (Sandbox Code Playgroud)
我的表格是:
this.form = this._formBuilder.group({
user: ['',Validators.required],
role: ['', Validators.required]
});
Run Code Online (Sandbox Code Playgroud) 我想知道是否有任何方法来设置值并更新表单控件的有效性.鉴于以下内容:
this.updateForm = this._formBuilder.group({
user: ['',Validators.required]
});
Run Code Online (Sandbox Code Playgroud)
我有一些关于更改触发器的指令,触发以下内容:
changeUserSelection(value){
this.updateForm.controls['user'].value = value // doesnt trigger validation?
}
Run Code Online (Sandbox Code Playgroud)
我想知道如何设置值,并触发此字段的验证.按照我的方式这样做,不会触发验证.
谢谢
我正在创建一个简单的表单,用户可以选择两个可能的值,即Local和Foreigner.如果用户没有选择任何内容,则表示该表单的值invalid.如果用户选择Local表格变为valid.如果用户选择Foreigner,则出现一个新字段,用于将国家作为用户的输入,这也是必需的.如果用户在国内输入字段中输入什么,这使得形式invalid.
我尝试创建如下表单:
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Control,ControlGroup,FormBuilder,FORM_DIRECTIVES,Validators} from 'angular2/common';
@Component({
selector: 'app',
template: `
<form [ngFormModel]="form" >
<select [ngFormControl]="nationalityCtrl" >
<option *ngFor="#nationality of nationalities" [value]="nationality" >{{nationality}}</option>
</select><br>
<input *ngIf="form.value.nationality == 'Foreigner'" type="text" [ngFormControl]="countryCtrl" placeholder="Country Name" />
<button class="btn btn-primary" [disabled]="!form.valid" >Submit</button>
</form>
`,
directives: [FORM_DIRECTIVES]
})
class MainApp{
public nationalities = ["Foreigner","Local"];
public form:ControlGroup;
public nationalityCtrl:Control;
public countryCtrl:Control;
constructor(private _fb:FormBuilder){
var …Run Code Online (Sandbox Code Playgroud)