Angular ControlValueAccessor如何轉移無效狀態？

Question

我已經使用ControlValueAccessor創建了一個自定義輸入，我可以在 formControl 中使用它並且它工作正常。 現在我想知道表單控件何時被認為無效，無法在我的自定義組件內的輸入上顯示紅色邊框。

這是我的自定義輸入：

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: InputComponent,
    },
  ],
})
export class InputComponent implements ControlValueAccessor {
  group = new FormGroup({
    input: new FormControl(''),
  });
  touched: boolean = false;

  // The id used for the html
  id!: number;

  // The label of the html input
  @Input() label: string = '';
  @Input() type: string = 'text';

  // The method called when the input is touched
  onTouched = () => {};

  constructor() {
    this.id = Math.floor(Math.random() * 100);
  }
  /**
   * The setter of the input value
   * @param value
   */
  writeValue(value: string): void {
    this.input.setValue(value);
  }

  /**
   * Function to subscribe to changes
   * @param fn
   */
  registerOnChange(fn: any): void {
    this.input.valueChanges.subscribe((value) => {
      fn(value);
    });
  }
  /**
   * Function to subscribe when the input is touched
   * @param fn
   */
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  /**
   * fucntion called to define the input as touched
   */
  markAsTouched() {
    if (!this.touched) {
      this.onTouched();
      this.touched = true;
    }
  }

  /**
   *
   * @param isDisabled
   */
  setDisabledState?(isDisabled: boolean): void {
    if (isDisabled) {
      this.input.disable();
    } else {
      this.input.enable();
    }
  }

  get input() {
    return this.group.get('input') as FormControl;
  }
}

然后我可以這樣使用它。

<app-input
  formControlName="email"
  label="Email"
></app-input>

如果我的 email 表單控件無效（例如，因為它不是有效的 email），那么在我的 DOM 組件上添加了一些 class。

有沒有辦法在 TS 組件中獲取有效性狀態？

Answer 1

不要在裝飾器中使用providers屬性提供值訪問器，而是使用以下命令：

constructor(
  @Optional() @Self() private ngControl: NgControl
) {
  // ...
  if (this.ngControl) this.ngControl.valueAccessor = this;
}

它做同樣的事情。 但在您的情況下，它所做的更多是讓您使用this.ngControl.control訪問本機表單控件。

這意味着您可以在任何給定點獲取控件的狀態，例如，您可以這樣做：

get status() {
  return this.ngControl.control.status; // "INVALID", "VALID", "PENDING"
}

Answer 2

你可以像這樣注入Injector ：

export class InputComponent implements OnInit , ControlValueAccessor {

  _control!: NgControl;

  constructor(@Inject(INJECTOR) private injector: Injector) { }

  ngOnInit(): void {
    this._control = this.injector.get(NgControl);
}

然后您可以訪問所有控制方法 - 例如：

  get isError() {
    return this._control.control?.invalid;
  }