使用ControlValueAccessor的角度自定义表单控件

问题描述

这不是问题-在这里我提出了一个解决方案，在这里找不到

这里是带有自定义验证的自定义表单控件的示例。该代码不言自明。主要思想是将验证从父组件传递到自定义内部组件，并在提交表单时触发验证。

<app-country fxFlex formControlName="social_country_id"></app-country>

在这里，我们有应用程序国家/地区组件。 html部分并不重要，它是根据情况定制的。

import { Component,forwardRef,Host,Input,OnDestroy,OnInit,Optional,SkipSelf } from '@angular/core';
import {
  ControlValueAccessor,FormControl,FormGroup,FormGroupDirective,NG_VALIDATORS,NG_VALUE_ACCESSOR,} from '@angular/forms';
import { Subject } from 'rxjs';
import { takeuntil } from 'rxjs/operators';
import { UtilsService } from 'src/app/service/utils/utils.service';
import { FormHelper } from 'src/app/shared/FormHelpers';

@Component({
  selector: 'app-country',templateUrl: './country.component.html',styleUrls: ['./country.component.scss'],providers: [
    {
      provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => CountryComponent),multi: true,},],})
export class CountryComponent extends FormHelper implements OnInit,ControlValueAccessor,OnDestroy {
  @input() formControlName: string;

  unsubscribe = new Subject<void>();
  countries = [];
  form: FormGroup;
  value = null;
  propagateChange: Function;

  constructor(
    private utilsService: UtilsService,@Optional()
    @Host()
    @SkipSelf()
    private controlContainer: FormGroupDirective
  ) {
    super();
  }

  ngOnInit(): void {
    this.loadCountries();
    this.initForm();
    this.setValidatorsFromParentControl();
    this.listenForChanges();
    this.triggerValidationOnParentFormSubmission();
  }

  private triggerValidationOnParentFormSubmission() {
    this.controlContainer.ngSubmit.subscribe(() => {
      this.form.markAllAsTouched();
    });
  }

  private listenForChanges() {
    this.form.valueChanges.subscribe((value) => {
      this.propagateChange(value.country_id);
    });
  }

  private setValidatorsFromParentControl() {
    this.form.controls['country_id'].setValidators(this.controlContainer.form.controls[this.formControlName].validator);
  }

  private initForm() {
    this.form = new FormGroup({
      country_id: new FormControl(this.value),});
  }

  writeValue(value: any) {
    this.value = value;
  }

  registerOnChange(fn: Function) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}

  loadCountries() {
    this.utilsService
      .getCountries()
      .pipe(takeuntil(this.unsubscribe))
      .subscribe((payload: Array<any>) => {
        this.countries = payload;
      });
  }

  ngOnDestroy() {
    this.unsubscribe.next();
    this.unsubscribe.complete();
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）