0
365
ViewsAngular: la entrada envuelta en un componente personalizado no funciona en forma basada en plantilla
Tal como dice el título, si envuelvo una entrada en mi componente personalizado, el formulario de plantilla de Angular no la recoge. Aquí está el stackblitz
Aquí hay un código de StackBlitz
aplicación.componente.html
<div ngForm #myForm="ngForm"> <app-custom-textbox customName="wrappedInput" customValue="wrapped" ></app-custom-textbox> <hr /> <input name="noWrapper" [(ngModel)]="message" /> </div> <hr /> <p>myForm.value is below:</p> {{ myForm.value | json }}custom-textbox.component.html
<p>My custom textbox component</p> <input type="textbox" name="{{ customName }}" [(ngModel)]="customValue" />cuadro de texto personalizado.component.ts
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-custom-textbox', templateUrl: './custom-textbox.component.html', }) export class CustomTextboxComponent { @Input() customName: string = ''; @Input() customValue: string = ''; } Espero ver las propiedades wrappedInput y noWrapper en la salida de myForm.value , pero solo se selecciona noWrapper .
·
Santiago Trujillo
1 answers
Answer question0
Necesita implementar ControlValueAccessor para CustomTextBoxComponent como a continuación: ~
import { Component, forwardRef, Input } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ selector: 'app-custom-textbox', templateUrl: './custom-textbox.component.html', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomTextboxComponent), multi: true, } ], }) export class CustomTextboxComponent implements ControlValueAccessor { @Input() customValue: string = ''; propagateChange = (_: any) => {}; public onTouched: any = () => {}; writeValue(obj: any): void { this.customValue = obj; } registerOnChange(fn: any): void { this.propagateChange = fn; } registerOnTouched(fn: any): void { this.onTouched = fn; } onModelChange(val: any) { this.propagateChange(val); } }
·
Santiago Trujillo
Report
Answer question