Creé un control llamado TextBox y, para simplificar, solo publicaré las partes relevantes del control aquí.
@Component({ selector: 'app-textbox', template: ` <input [(ngModel)]="value" [disabled]="disabled" /> `, styleUrls: ['./textbox.component.css'] }) export class TextboxComponent implements OnInit, ControlValueAccessor { constructor() { } writeValue(obj: any): void { this._value = obj; } registerOnChange(fn: any): void { this.onChange = fn; } registerOnTouched(fn: any): void { this.onTouch = fn; } setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; } disabled = false; onChange:()=>{} onTouch:()=>{}; private _value:string; public get value():string { return this._value } public set value(value:string){ this._value = value; } ngOnInit(): void { }y mi app.component.ts parece:
@Component({ selector: 'app-root', template: ` <form [formGroup]="form" novalidate> <div> <label >Name</label> <app-textbox formControlName="name"></app-textbox> </div> </form> `, styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ /** * */ constructor(private formBuilder:FormBuilder) { } form = this.formBuilder.group({ name:['', Validators.required] }) model:NameModel = { name:'test' } ngOnInit(): void { this.form.get('name').setValue(this.model.name); } } interface NameModel{ name:string; }Cuando ejecuto la aplicación, espero que el cuadro de texto se complete con la prueba de valor.
¿Puede alguien explicar por qué no lo es?
Agregaré cuando haga this.form.get('name')?.value Obtengo el valor correcto.
Solo tienes que moverte configurando el valor this.form.get('name').setValue(this.model.name); a ngAfterViewInit en lugar de ngOnInit , o debe llamar después:
this.form.updateValueAndValidity();Por cierto, hay dos notas aquí que debes tener en cuenta:
TextboxComponent , por lo que debe llamar al método onChange registrado dentro del valor establecido de la siguiente manera: private _value: string; public get value(): string { return this._value; } public set value(value: string) { this._value = value; this.onChange(value); }FormGroup dentro de ngOnInit y establecer el valor predeterminado de name directamente, como se muestra a continuación: form: FormGroup; ngOnInit(): void { this.form = this.formBuilder.group({ name: [this.model.name, Validators.required], }); }En writeValue(obj) , debe asignar el obj de entrada recibido a this._value
writeValue(obj: any): void { if (obj !== this._value) { this._value = obj; } } Y no olvide agregar proveedores para NG_VALUE_ACCESSOR y el proveedor múltiple para ampliar los proveedores existentes. (Consulte las Referencias 1 )
@Component({ selector: 'app-textbox', template: ` <input [(ngModel)]="value" [disabled]="disabled" /> `, styleUrls: ['./textbox.component.css'], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextboxComponent), multi: true } ] }) export class TextboxComponent implements OnInit, ControlValueAccessor { writeValue(obj: any): void { if (obj !== this.value) { this._value = obj; } } ... }Solución de muestra en StackBlitz
Conecte su control personalizado a ngModel con Control Value Accessor.