Angular 4 关于具有数据绑定的输入元素的指令

Question

我正在尝试为表单中的输入元素编写属性指令，以验证给定的用户名是否可用。

这样做有 2 个问题。

1) 我想让这个指令可以重用，方法是允许它接收 API 路由，它应该用来验证用户名。这是我所拥有的，如您所见，它不接受任何输入（没有绑定）并且运行良好。

import { Directive, forwardRef } from '@angular/core';
import { AbstractControl, Validator, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../../environments/environment';
import { Observable } from 'rxjs/Observable';

@Directive({
  selector: '[uniqueCompanyUsername]',
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: forwardRef(() => CompanyUsernameValidatorDirective), multi: true
    },
  ]
})
export class CompanyUsernameValidatorDirective implements Validator {
  constructor(private http: HttpClient) {
  }

  validate(username: AbstractControl) {
    return Observable.timer(1000).switchMap(() => {
      return this.http.post(environment.apiEndpoint + '/company/username-check', {
        username: username.value
      }).map((result: any) => result.success ? null : { uniqueCompanyUsername: false });
    });
  }
}

一旦我向它添加 @Input('uniqueCompanyUsername') route: string; 并尝试通过指令本身获取路由，它就会给我这个错误：

Can't bind to 'uniqueCompanyUsername' since it isn't a known property of 'input'.

这是我在我的指令控制器中写的：

import { Directive, forwardRef, Input } from '@angular/core';
import { AbstractControl, Validator, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../../environments/environment';
import { Observable } from 'rxjs/Observable';

@Directive({
  selector: '[uniqueCompanyUsername]',
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: forwardRef(() => CompanyUsernameValidatorDirective), multi: true
    },
  ]
})
export class CompanyUsernameValidatorDirective implements Validator {
  constructor(private http: HttpClient) {
  }

  @Input('uniqueCompanyUsername') route: string;

  validate(username: AbstractControl) {
    return Observable.timer(1000).switchMap(() => {
      return this.http.post(`${environment.apiEndpoint}${this.route}`, {
        username: username.value
      }).map((result: any) => result.success ? null : { uniqueCompanyUsername: false });
    });
  }
}

这是我的模板：

<input name="companyUsername" [(ngModel)]="company.username" id="input-username" #companyUsername="ngModel" class="form-control" placeholder="Company Username"
                [class.form-control-danger]="companyUsername.invalid && companyUsername.touched" [minlength]="3" [maxlength]="50" [required]="true"
                [uniqueCompanyUsername]="/company/username/" autofocus>

我很沮丧，我不明白这里出了什么问题！

Answer 1

您的属性名称需要与您的输入装饰器名称匹配。

改变这个：

@Input('uniqueCompanyUsername') route: string;

对此：

@Input() uniqueCompanyUsername: string;

并记得将组件中的 "this.route"s 更改为 "this.uniqueCompanyUsername"s。

有关 Avoid aliasing inputs and outputs.

的更多信息

Angular 4 关于具有数据绑定的输入元素的指令

Angular 4 Directive on Input element with data binding

angular-directive

angular

angular4-forms