Angular

Question

我想将一组验证组合成一个包，然后重新使用它，但它对我不起作用，当我应用验证包时，控件始终无效。

validation-bundles.ts - 这里我定义了我的验证包：

import { ValidationErrors, Validators } from "@angular/forms";

export class ValidationBundles {

    static email(): Array<ValidationErrors | null> {
        return [Validators.required, Validators.email];
    }

    static password(): Array<ValidationErrors | null> {
        return [Validators.required, Validators.minLength(6), Validators.maxLength(50)];
    }

}

login.component.ts - 这里我使用验证包作为示例：

this.loginForm = new FormGroup({
      email: new FormControl('', ValidationBundles.email),
      password: new FormControl('', ValidationBundles.password)
    });

login.component.html - 这里我定义了验证错误信息：

<mat-error *ngIf="loginForm.controls['password'].hasError('required')">
    Password is required.
</mat-error>
<mat-error *ngIf="loginForm.controls['password'].hasError('minlength')">
    Mininum length is 6 characters.
</mat-error>
<mat-error *ngIf="loginForm.controls['password'].hasError('maxlength')">
    Maximum length is 50 characters.
</mat-error>

所以我的问题是：

如何使它正常工作？
我可以在使用捆绑包时向控件添加更多验证吗？比如合并验证？
是否有与此主题相关的最佳实践？

Answer 1

你做的一切都很好，只有两个小的改进：

它是 ValidationFns 数组而不是 ValidationErrors

export class ValidationBundles {

    static email(): Array<ValidatorFn | null> {
        return [Validators.required, Validators.email];
    }

}

你应该像下面这样调用 ValidationBundles.email 你会得到你需要的：ValidationFns 数组

this.loginForm = new FormGroup({
   email: new FormControl('', ValidationBundles.email()),
   password: new FormControl('', ValidationBundles.password())
});

Angular - 组合验证不起作用

Angular - Combining validations are not working

angular-validation