实现ControlValueAccessor和验证器的MatformfieldControl创建了循环依赖性

Question

我正在尝试通过实现matformfieldcontrol，controlValueAccessor和验证器接口来创建自定义表单控制。

但是，当我提供NG_VALUE_ACCESSOR或NG_VALIDATORS ..

时

@Component({
  selector: 'fe-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.scss'],
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => PhoneNumberInputComponent)
    },
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PhoneNumberInputComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => PhoneNumberInputComponent),
      multi: true
    }
  ]
})
export class PhoneNumberInputComponent implements MatFormFieldControl<string>,
  ControlValueAccessor, Validator, OnDestroy {
  ...
}

创建了循环依赖性：

未接收错误：模板解析错误： 无法实例化循环依赖性！ngcontrol

这有效：

@Component({
  selector: 'fe-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.scss'],
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => PhoneNumberInputComponent)
    }
  ]
})
export class PhoneNumberInputComponent implements MatFormFieldControl<string>,
  ControlValueAccessor, Validator, OnDestroy {
  ...
  constructor(@Optional() @Self() public ngControl: NgControl) {
    if (this.ngControl) {
      this.ngControl.valueAccessor = this;
    }
  }
}

，但我仍然不知道如何使验证工作。提供NG_VALIDATORS会产生周期性的依赖性。没有提供，validate方法根本不调用。

我正在使用 @angular/材料5.0.4。

Answer 1

要摆脱周期性依赖性，我从组件中删除了Validator接口，而是直接提供了验证器函数。

export function phoneNumberValidator(control: AbstractControl) {
  ...
}
@Component({
  selector: 'fe-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.scss'],
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => PhoneNumberInputComponent)
    },
    {
      provide: NG_VALIDATORS,
      useValue: phoneNumberValidator,
      multi: true
    }
  ]
})
export class PhoneNumberInputComponent implements MatFormFieldControl<string>,
  ControlValueAccessor, OnDestroy {
  ...
  constructor(@Optional() @Self() public ngControl: NgControl) {
    if (this.ngControl) {
      this.ngControl.valueAccessor = this;
    }
  }
}

Answer 2

我的解决方案从@blid中获取了这个想法，而是复制与正在验证的组件相同的 @Inputs，我通过依赖项注入将组件注入类似：

：

@Directive({
  selector: 'fe-phone-number-input, [fePhoneNumber]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: PhoneNumberInputValidatorDirective,
      multi: true
    }
  ]
})
export class PhoneNumberInputValidatorDirective implements Validator {
  constructor(private injector: Injector) {}
  
  validate(control: FormControl) {
    // use @Self to get the only instance of component that this validator is directly attached to
    // use @Optional so that this validator can be used separately as a directive via attribute `fePhoneNumber`
    const phoneNumberInputComponent = this.injector.get(PhoneNumberInputComponent, undefined, InjectFlags.Self | InjectFlags.Optional);
    if (phoneNumberInputComponent?.myInput) {
      // some custom logic
    }
    return null;
  }
}

Answer 3

做到这一点的清洁是创建与@Component相同选择器的@Directive。这样，@Directive可以镜像任何@Component CC_11具有并在验证时对其进行解释。

@Directive({
  selector: 'fe-phone-number-input',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: PhoneNumberInputValidatorDirective,
      multi: true
    }
  ]
})
export class PhoneNumberInputValidatorDirective implements Validator { ... }

Answer 4

我不确定您需要实现验证器接口。对于我的自定义控件，我使用注射 ngcontrol 进行任何验证。

@Component({
  selector: 'fe-phone-number-input',
  templateUrl: './phone-number-input.component.html',
  styleUrls: ['./phone-number-input.component.scss'],
  providers: [
    {
      provide: MatFormFieldControl,
      useExisting: forwardRef(() => PhoneNumberInputComponent),
    },
  ],
})
export class PhoneNumberInputComponent
  implements MatFormFieldControl<string>, ControlValueAccessor
{
  constructor(@Optional() @Self() public ngControl: NgControl) {
    if (this.ngControl != null) {
      this.ngControl.valueAccessor = this;
    }
  }
  updatePhone(phone: string) {
    this.value = phone;
    this.ngControl.control?.updateValueAndValidity();
  } 
}

<input
  class="phone-number-input mat-input-element"
  type="text"
  (blur)="updateValue(phoneInput.value)"
  [required]="required"
  #phoneInput
/>