'fullName' 表单控件在文本输入期间不会更改

问题描述

我正在研究子表单中的 ControlValueAccessor 实现。我有一个父表单组和控制如下

    this.form = this.formBuilder.group({
      user: ['',Validators.required]
    });

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

  {{ form.get('user').value | json }}
</form>

和子窗体

export class CustomInputComponent implements OnInit,ControlValueAccessor {
  userInfo: FormGroup;

  onChange  = (value) => {};

  onTouched = (value) => {};

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.userInfo = this.formBuilder.group({
      fullName: ['',Validators.required],email: ['',Validators.required]
    });
  }

  writeValue(value): void {
    console.log(value)
    value && this.userInfo.setValue(value,{emitEvent: false});
  }

  registerOnChange(fn: any): void {
    console.log("on change");
    this.userInfo.valueChanges.subscribe(fn);
  }

  registerOnTouched(fn: any): void {
    console.log("on touched");
    this.onTouched = fn;
  }

}

<ng-container [formGroup]="userInfo">
  <label>Full name</label>
  <input forControlName="fullName" type="text" name="fullName" />

  <label>Email</label>
  <input formControlName="email" type="email" />
</ng-container>

我有以下结果：

该值可以仅针对 email 表单控件显示并在其更改时更新，但 fullName 在键入过程中保持不变。

解决方法

它应该是'formControlName'而不是

<input forControlName="fullName" type="text" name="fullName" />