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

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

1 个答案: