'fullName' 表单控件在文本输入期间不改变
'fullName' form control does not change during text input
我正在 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
在键入期间仍然相同。
它应该是 'formControlName' 而不是
<input forControlName="fullName" type="text" name="fullName" />
我正在 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
在键入期间仍然相同。
它应该是 'formControlName' 而不是
<input forControlName="fullName" type="text" name="fullName" />