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

Question

我正在 ControlValueAccessor 以 child 形式实施。我有一个 parent 表单组和控件如下

    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>

和child形式

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" />

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

'fullName' form control does not change during text input

angular

angular-reactive-forms

formgroups

angular-formbuilder

controlvalueaccessor