Question

passwordInvalid是一个布尔值，我希望能用它来切换md输入的错误状态。

我希望能够做到这样的事情：

<md-input-container [error]="passwordInvalid" >
     <input name="password" tabindex="1" required mdInput 
   placeholder="Password" type="password" [(ngModel)]="user.password" value="{{user.password}}">
     <md-error >Invalid login</md-error>
</md-input-container>

当passwordInvalid为真时，将切换包括显示md-error的错误状态。当它返回false时，它将返回到有效状态。

目前我的贫民窟工作：

<md-input-container [class.mat-input-invalid]="passwordInvalid" >
     <input name="password" tabindex="1" required mdInput placeholder="Password" type="password" [(ngModel)]="user.password" value="{{user.password}}">
     <md-error [class.mat-input-error]="passwordInvalid">Invalid login</md-error>
</md-input-container>

md-error组件/指令如果他们尝试提交而不输入任何内容，则会显示，因为该字段是必需的。如果passwordInvalid为true，则样式将在容器上运行，但md-error组件/指令不会出现。

文档中是否缺少某些内容？

Answer 1

您应该使用接受passwordInvalid值的异步验证器并为输入设置错误。见the working plunker。单击passwordInvalid切换器更改其值，然后开始键入或按下按钮以查看错误。

<强> my.validator.ts

import {Directive, OnInit, forwardRef, Input, OnChanges, SimpleChanges} from '@angular/core';
import {Validator, AbstractControl, NG_VALIDATORS, NG_ASYNC_VALIDATORS, ValidationErrors} from '@angular/forms';
import {BehaviorSubject} from "rxjs/BehaviorSubject";

@Directive({
    selector: '[myValidator][ngModel]',
    providers: [
        { provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => MyValidator), multi: true },
    ]
})
export class MyValidator implements OnInit, Validator, OnChanges {
    @Input('myValidator')
    public myValidator: boolean;

    errors$: BehaviorSubject<ValidationErrors | null> = new BehaviorSubject<ValidationErrors | null>(null);

    ngOnInit() {
        this.errors$.next(this.myValidator);
    }

    ngOnChanges(changes: SimpleChanges) {
        changes.myValidator && this.errors$.next(changes.myValidator.currentValue);
    }

    validate(c: AbstractControl) {
        return this.errors$.asObservable().map(value => {
            let obj = c.errors || {};
            if (value) obj.myValidator = value;
            else delete obj['myValidator'];
            if (!Object.keys(obj).length) obj = null;
            c.setErrors(obj);
            console.log('obj', obj)
            return obj;
        });
    }
}

用法示例：

    <md-input-container>
        <input name="password" tabindex="1" required mdInput 
               [myValidator]="passwordInvalid"  #password="ngModel"
               placeholder="Password" type="password" [(ngModel)]="user.password" value="{{user.password}}">
        <md-error *ngIf="password.errors?.required" >Field is required</md-error>
        <md-error *ngIf="password.errors?.myValidator">passwordInvalid</md-error>

        {{ password.errors|json }}
    </md-input-container>

如何触发错误状态，包括md-error

1 个答案: