如何使用 ControlValueAccessor 将 Angular 中的自定义输入标记为已触摸？

Question

我想要的是

如果用户单击提交按钮但没有填写所有输入，我会将所有输入标记为已触摸，因为表单上有一个必需的验证器，空输入应该有一个红色边框。

问题

当我将表单的所有输入标记为已触摸时，自定义输入不会更改，也不会添加类：

只有基本输入有类，这里是 html 的结果，只有基本输入显示红色边框：

输入组件

import {AfterContentChecked, Component, Input, OnInit, Optional, Self} from '@angular/core';
import {ControlValueAccessor, NgControl, UntypedFormControl, UntypedFormGroup} from '@angular/forms';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css'],
  providers: [],
})
export class InputComponent implements ControlValueAccessor, OnInit {
  group = new UntypedFormGroup({
    input: new UntypedFormControl(''),
  });
  touched: boolean = false;
  @Input() label: string = '';
  private ngControl: NgControl;

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

  _value: string = '';

  get value(): string {
    return this._value;
  }

  @Input()
  set value(value: string) {
    this._value = value;
    this.input.setValue(value, {emitEvent: false});
  }

  _disabled: boolean = false;

  get disabled(): boolean {
    return this._disabled;
  }

  @Input()
  set disabled(disabled: boolean) {
    this._disabled = disabled;
    if (disabled) {
      this.input.disable();
    } else {
      this.input.enable();
    }
  }

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


  ngOnInit(): void {
    if (this.ngControl !== null) {
      this.ngControl.control?.statusChanges.subscribe((status) => {
        if (status === 'INVALID') {
          this.input.markAsDirty();
          this.input.markAsTouched();
          this.input.setErrors({incorrect: true});
        }
      });
    } else {
      console.warn('no formcontrol');
    }
  }

  onTouched = () => {
  };

  writeValue(value: string): void {
    this.input.setValue(value, {emitEvent: false});
  }

  registerOnChange(fn: any): void {
    this.input.valueChanges.subscribe((value) => {
      this.markAsTouched();
      fn(value);
    });
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  markAsTouched() {
    if (!this.touched) {
      this.onTouched();
      this.touched = true;
    }
  }

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

}

<span [formGroup]="group">
  <label [innerHTML]="label" ></label>
        <input
          class="w-full" formControlName="input"
          ngDefaultControl
          type="text">
</span>

应用组件

import { Component } from '@angular/core';
import {UntypedFormControl, UntypedFormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test-input';
  myForm = new UntypedFormGroup({
    inputBasic: new UntypedFormControl('',[Validators.required]),
    inputCustom: new UntypedFormControl('',[Validators.required]),
  })

  submit(){
    if(this.myForm.valid){
      console.log('valid')
    }else{
      this.myForm.markAllAsTouched();
      // If I add the next line the input is updated and the style is good
      // this.myForm.get('inputCustom')?.setErrors({errorMessage:'Error'})
    }
  }
}

<form [formGroup]="myForm" (submit)="submit()">
    <div>
      Basic input <input formControlName="inputBasic"/>
    </div>
  <div>
    <app-input label="Custom input" formControlName="inputCustom"></app-input>
  </div>
  <button type="submit">Submit</button>
</form>

CSS 在两个组件中

.ng-invalid.ng-touched{
  border-color:red;
}

Answer 1

当我们有自定义表单控件时，我们需要了解 ng-invalid 和 .ng-touched 应用于整个组件，而无效/触摸的是ngControl

正如我们所知，我们可以在 .html 中使用 ngControl

<input [class.ng-touched]="ngControl?.touched"
       [class.ng-invalid]="ngControl?.invalid"
       ...
>

顺便说一句：当我们可以使用一个简单的组件和viewProviders:[{ provide: ControlContainer, useExisting: FormGroupDirective }] ，参见，例如这个SO