相关疑难解决方法(0)

Angular2验证器,它依赖于多个表单字段

是否可以创建一个可以使用多个值来确定我的字段是否有效的验证器?

例如,如果客户的首选联系方式是通过电子邮件,则应该要求电子邮件字段.

谢谢.


更新了示例代码...


    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)

angular

106
推荐指数
7
解决办法
8万
查看次数

Angular 2表单验证重复密码

关于验证器与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)

angular

60
推荐指数
6
解决办法
8万
查看次数

如果可见,如何将Validator设置为必需?

我想知道如何将以下形式的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)

angular2-forms angular

9
推荐指数
2
解决办法
5975
查看次数

设置值的方法和更新表单控件的有效性

我想知道是否有任何方法来设置值并更新表单控件的有效性.鉴于以下内容:

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)

我想知道如何设置值,并触发此字段的验证.按照我的方式这样做,不会触发验证.

谢谢

angular2-forms angular

4
推荐指数
3
解决办法
2万
查看次数

Angular2 - 有条件创建的输入字段的表单验证

我正在创建一个简单的表单,用户可以选择两个可能的值,即LocalForeigner.如果用户没有选择任何内容,则表示该表单的值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)

javascript forms validation angularjs angular

3
推荐指数
1
解决办法
3896
查看次数