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
.
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); } }