angular - 你如何在 Angular 5 的自定义验证指令中使用多个参数？

Question

例如，Angular 文档 here使用以下指令进行 forbiddenName 验证:

@Directive({
  selector: '[appForbiddenName]',
  providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
export class ForbiddenValidatorDirective implements Validator {
  @Input('appForbiddenName') forbiddenName: string;

  validate(control: AbstractControl): {[key: string]: any} {
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                              : null;
  }
}

是否可以使用 Object 或 string[] 的 @Input 而不是仅允许字符串？如果不是，如何传入多个参数？

Angular 文档在示例中这样使用它:

<input id="name" name="name" class="form-control"
       required minlength="4" appForbiddenName="bob"
       [(ngModel)]="hero.name" #name="ngModel" >

Answer 1

带分隔符的多个字符串

您可以传递带有分隔符的多个字符串。

比如我定义了一个范围验证器如下:

                    <input class="form-control" 
                            id="inputStarRating" 
                            type="text" 
                            placeholder="Rating"
                            mhRange="1,5"
                            [(ngModel)] = "movie.starRating"
                            name="starRating"
                            #starRatingVar = "ngModel" />

指令的代码如下:

  constructor(@Attribute('mhRange') range: string) {
    const arr = range.split(',');
    let min = 1;
    let max = 10;
    if (arr[0]) { min = parseInt(arr[0], 10); }
    if (arr[1]) { max = parseInt(arr[1], 10); }
    this.validator = NumberValidators.range(min, max);
  }

请注意，这使用拆分来分离两个不同的值。

数组

你也可以像这样传递数组:

  @Input('appForbiddenName') forbiddenName: string[];

  validate(control: AbstractControl): {[key: string]: any} {
    console.log(this.forbiddenName);
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName[0], 'i'))(control)
                              : null;
  }

注意:为了尽量减少对上述代码的更改，我只检查了第一个元素。但您可以将其更改为遍历数组。

HTML 看起来像这样:

    <input id="name" name="name" class="form-control"
           required minlength="4" [appForbiddenName]="powers"
           [(ngModel)]="hero.name" #name="ngModel" >

注意它如何使用绑定(bind)来绑定(bind)值数组。

对象

你可以这样定义对象:

  @Input('appForbiddenName') forbiddenName: Hero;

  validate(control: AbstractControl): {[key: string]: any} {
    console.log(this.forbiddenName);
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName.alterEgo, 'i'))(control)
                              : null;
  }

假设定义了一个 Hero 类型。对于文档中的示例应用程序，我必须使用 any，因为没有定义 Hero 类型。

HTML 看起来像这样:

    <input id="name" name="name" class="form-control"
           required minlength="4" [appForbiddenName]="hero"
           [(ngModel)]="hero.name" #name="ngModel" >

Bottom line, you cannot pass anything but a string to the attribute, but that string can be a binding.

所以做这样的事情:

appForbiddenName='{"name":"Dr.", "alterEgo":"Dr. What", "power":"test"}'

只是将其作为字符串提供。您必须编写代码来解析它并将其转回对象:

  @Input('appForbiddenName') forbiddenName: string;

  validate(control: AbstractControl): {[key: string]: any} {
    const hero: Hero = JSON.parse(this.forbiddenName);
    console.log(hero.alterEgo);
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(hero.alterEgo, 'i'))(control)
                              : null;
  }