使用[(ngModel)]绑定代替ngModel,并确保在组件中正确使用ControlValueAccessor接口。
示例代码:
//在组件中实现ControlValueAccessor接口 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Component, forwardRef } from '@angular/core';
@Component({ selector: 'app-custom-input', templateUrl: './custom-input.component.html', styleUrls: ['./custom-input.component.css'], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true } ] }) export class CustomInputComponent implements ControlValueAccessor { value: string = ''; onChange: any = () => {}; onTouch: any = () => {};
writeValue(value: any) { this.value = value; this.onChange(value); this.onTouch(value); } registerOnChange(fn: any) { this.onChange = fn; } registerOnTouched(fn: any) { this.onTouch = fn; } }
//在HTML文件中使用[(ngModel)]绑定