如何在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;
  }
}

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

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" >

请注意它如何使用绑定绑定到值数组。

对象

您可以像这样定义对象：

  @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" >

最重要的是，您不能将除字符串之外的任何内容传递给属性，但该字符串可以是绑定。

所以做这样的事情：

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;
  }