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

Question

我正在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在键入期间的基础相同。

Answer 1

它应该是“formControlName”而不是

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