传递一个数组自定义验证角

我的模板：传递一个数组自定义验证角

  <input mdInput 
       [mdAutocomplete]="auto" 
       [(ngModel)]="formData.areaName" 
       (keyup)="updateFilteredAreas(formData.areaName)" 
       class="form-control {{areaName.errors && (areaName.dirty || areaName.touched) ? 'failed-validation' : ''}}" 
       name="areaName" 
       #areaName="ngModel" 
       arrayIncludes="one,two,three" 
       required> 

      <div *ngIf="areaName.errors && (areaName.dirty || areaName.touched)" 
       [hidden]="!areaName.errors.arrayIncludes" 
       class="validation-error"> 
      Please enter a value from the array 
      </div>

我自定义的验证：

export class CustomValidators { 

    public static arrayIncludes(arrayIncludes: string): ValidatorFn { 
    return (control: AbstractControl): { [key: string]: any } => { 
     if (isPresent(Validators.required(control))) { 
     return null; 
     } 

     let arrayFromString = arrayIncludes.split(","); 

     let value: string = control.value; 

     return arrayFromString.includes(value) ? 
     null : 
     { arrayIncludes: { valid: false } }; 
    }; 
    } 
}

辅助功能：

function isPresent(obj) { 
    return obj !== undefined && obj !== null; 
}

验证指令：

const ARRAY_INCLUDES_VALIDATOR = { 
    provide: NG_VALIDATORS, 
    useExisting: forwardRef(() => ArrayIncludesValidator), 
    multi: true 
}; 

@Directive({ 
    selector: '[arrayIncludes][ngControl],[arrayIncludes][ngFormControl],[arrayIncludes][ngModel]', 
    providers: [ARRAY_INCLUDES_VALIDATOR] 
}) 
export class ArrayIncludesValidator implements Validator { 
    private _validator: any; 

    constructor(@Attribute('arrayIncludes') arrayIncludes: string) { 
    this._validator = CustomValidators.arrayIncludes(arrayIncludes); 
    } 

    public validate(control: AbstractControl): {[key: string]: any} { return this._validator(control); } 
}

到目前为止，我可以把一个字符串值的指令模板：

arrayIncludes="one,two,three"

，然后将字符串转换为一个数组，其结果是，只有“一”，“二”，“三个“值是允许的。我需要的是从控制器传递一个对象到指令，这是一个对象数组。这些对象具有propery“area.name”，并且每个“area.name”是有效的输入。当我使用的语法：

[arrayIncludes]="filteredAreas"

与“filteredAreas”是我对象，我得到的错误是

Error: Template parse errors: 
Can't bind to 'arrayIncludes' since it isn't a known property of 'input'. (" 
       name="areaName" 
       #areaName="ngModel" 
       [ERROR ->][arrayIncludes]="filteredAreas" 
       required> 

"): ng:///RegistrationModule/[email protected]:21

如何修改我的自定义验证通过模板来接受对象。它必须与“@Input”装饰器有关。我的问题与此thread非常相似，但它似乎缺少我需要的信息。

来源

2017-08-04 Riddle00

如果你想传递一个对象，你应该使用@Input代替@Attribute

@Directive({...}) 
export class ArrayIncludesValidator implements Validator { 
    private _validator: any; 

    @Input() arrayIncludes: any; 

    ngOnInit() { 
    this._validator = CustomValidators.arrayIncludes(this.arrayIncludes); 
    } 

    public validate(control: AbstractControl): {[key: string]: any} { return this._validator(control); } 
}

来源

2017-08-04 10:32:38 yurzui

传递一个数组自定义验证角

回答

相关问题