相关疑难解决方法(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 FormGroup获取所有验证错误

鉴于此代码:

this.form = this.formBuilder.group({
      email: ['', [Validators.required, EmailValidator.isValid]],
      hasAcceptedTerms: [false, Validators.pattern('true')]
    });
Run Code Online (Sandbox Code Playgroud)

如何从中获取所有验证错误this.form

我正在编写单元测试,并希望在断言消息中包含实际的验证错误.

validation typescript angular

61
推荐指数
5
解决办法
7万
查看次数

Angular2中的交叉字段验证

我正在构建一个Angular2客户端应用程序.我目前正在研究成员资格组件,并将客户端组件与MVC6 vNext Identity v3集成.我编写了自定义Angular2密码验证器,如下所示:

needsCapitalLetter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[A-Z]/))
        return {'needsCapitalLetter': true}

    return null;
}

needsLowerLetter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[a-z]/))
        return {'needsLowerLetter': true}

    return null;            
}

needsNumber(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/\d/))
        return {'needsNumber': true}

    return null;            
}

needsSpecialCharacter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[^a-zA-Z\d]/))
        return {'needsSpecialCharacter': true}

    return null;            
}
Run Code Online (Sandbox Code Playgroud)

这项工作很棒,而且我很喜欢Angular2,但现在我正在尝试编写一个验证器来验证"确认密码"是否等于"密码".为了做到这一点,我需要能够相对于另一个验证一个字段.我可以在组件级别轻松完成此操作,只需检查模糊,提交或其他任何方式,但这会绕过Angular2 ngForm验证系统.我非常想弄清楚如何为一个可以检查另一个字段的值的字段编写一个Angular2 Validator,方法是传入另一个字段的名称或者接近它的东西.看起来这应该是一种能力,因为这在几乎任何复杂的业务应用程序UI中都是必需的.

javascript validation angular

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

密码和确认密码字段验证angular2反应形式

我需要使用反应式表格angular2来检查密码和确认密码字段是否具有相同的值.我确实在这里看到了很多答案,Angular 2表格验证了重复密码,比较验证器中的字段和angular2,但似乎没有人对我有用.有人请帮忙."这个"在我的验证函数中是未定义的: (.分享我的代码,

this.addEditUserForm = this.builder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            title: ['', Validators.required],
            email: ['', Validators.required],
            password: ['', Validators.required],
            confirmPass: ['', [Validators.required, this.validatePasswordConfirmation]]
        });
validatePasswordConfirmation(group: FormGroup): any{
        let valid = true;
        // if (this.addEditUserForm.controls.password != this.addEditUserForm.controls.confirmPass) {
        //     valid = false;
        //     this.addEditUserForm.controls.confirmPass.setErrors({validatePasswordConfirmation: true});
        // }
        return valid;
    }
Run Code Online (Sandbox Code Playgroud)

angular2-forms angular

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

将验证器中的字段与angular2进行比较

我正在尝试在Angular2中创建一个具有"重复密码"功能的注册表单.我希望这可以使用自定义验证器作为表单控件.

我遇到的问题是,当验证器运行时,"this-context"似乎被设置为验证器,因此我无法访问RegistrationForm类上的任何本地方法.我似乎无法找到从验证器访问ControlGroup的任何好方法.

任何人都知道在自定义验证器中访问同一控件组中的其他控件的好方法吗?

这是组件的简短示例:

import { Component, View } from 'angular2/angular2';
import { Validators, ControlGroup, Control, FORM_DIRECTIVES, FORM_BINDINGS } from 'angular2/angular2';

@Component({
    selector: 'form-registration'
})
@View({
    directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES],
    template: `
        <form (submit)="register($event)" [ng-form-model]="registerForm">
            <label for="password1">Password:</label>
            <input id="password1" ng-control="password1" type="password" placeholder="Passord" />

            <label for="password2">Repeat password:</label>
            <input id="password2" ng-control="password2" type="password" placeholder="Gjenta passord" />

            <button class="knapp-submit" type="submit" [disabled]="!registerForm.valid">Registrer deg</button>
        </form>
    `
})
export class RegistrationForm {
    registerForm: ControlGroup;

    constructor() {            
        this.registerForm = new ControlGroup({
            password1: new Control('', Validators.required),
            password2: new Control('', this.customValidator) …
Run Code Online (Sandbox Code Playgroud)

typescript angular

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

Angular2:使用FormBuilder Validators.required和复选框组的最佳方法

我正在使用FormBuilder和ngFormModel在Angular2中构建一个表单,并且无法找到一种优雅的方法来验证复选框组中的一个或多个复选框是否已被选中.我不想在我使用它们的任何地方编写自定义组件方法来验证复选框组.理想情况下,使用带有FormBuilder和Validators.required的ngFormModel甚至自定义验证器会很棒.

forms checkbox angular

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