angular - Angular - 在控件值访问器中添加/删除类

Question

我以这种方式有一个带有引导程序的反应形式：

<form [formGroup]="form">
   <div class="mb-3">
      <label for="user">Username</label>
      <input type="text" class="form-control" id="user" placeholder="Insert Username"
        formControlName='user' [ngClass]="{'is-invalid': form.get('user').invalid && (form.get('user').touched || form.get('user').dirty), 'is-valid': form.get('user').valid}" >
   </div>
</form>

使用控制值访问器的自定义组件变成：

<form [formGroup]="form">
  <custom-input formControlName="user"></custom-input>
</form>

如果控件在外部，我如何在自定义输入中应用 [ngClass] 部分？

这是我的 custom.component.ts：

@Component({
  selector: 'custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputTextComponent),
      multi: true,
    },
  ],
})
export class InputTextComponent implements ControlValueAccessor {
  private onChangeFn: Function;
  private onTouchFn: Function;

  @Input() field: any;
  public valueInput: any;
  public disabled: boolean;
  ngControl: NgControl;

  constructor(private inj: Injector) {}

  writeValue(value: any): void {
    this.valueInput = value;
  }
  registerOnChange(fn: any): void {
    this.onChangeFn = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouchFn = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  changeText(event) {
    this.valueInput = event.target.value;
    this.onTouchFn();
    this.onChangeFn(this.valueInput);
  }
}

和我的html

<div class="mb-3">
    <label for="user">Username</label>
    <input type="text" class="form-control" id="user" placeholder="Insert Username"
        [value]="valueInput" (change)="changeText($event)">
</div>