Estoy tratando de crear una forma reactiva dinámica, pero el valor no se muestra
<div *ngFor="let deliveryAcross of (deliveriesAcross | async)!; let i = index;"> <app-delivery-across [index]="i" [deliveryAcross]="deliveryAcross" ></app-delivery-across> {{ deliveryAcross | json }} </div>entrega a través de.component.ts
@Input("deliveryAcross") deliveryAcross: IDeliverAcross; minFormControl: FormControl; errorStateMatcher: NextErrorStateMatcher; constructor(private change: ChangeDetectorRef, private store: Store) { this.deliveryAcross = { iso: "", min: 1, max: 2, shippingCents: 0, shippingEuros: 0, }; this.minFormControl = new FormControl("", [ Validators.required, Validators.min(1), ]); this.errorStateMatcher = new NextErrorStateMatcher(); } No puedo usar ngModel porque causaría errores de solo lectura, por eso elijo usar el valor en su lugar, pero mi valor no se muestra, sino que la entrada se actualiza de nuevo a vacío
<mat-form-field class="full-width" [@transformRightLeftStateTrigger]="stateDown | async" > <input matInput [formControl]="minFormControl" [errorStateMatcher]="errorStateMatcher" placeholder="Minimaal" appDeliveryAcross [value]="deliveryAcross.min" autocomplete="off" [key]="'min'" [component]="'delivery-across'" type="number" /> </mat-form-field> ¿Por qué el valor que proviene de deliveryAcross.min no se muestra en la entrada?
Eso sucede porque está utilizando el value junto con formControl como fuente de valor para la entrada, por lo que el valor inicial de formControl anula el value uno.
Puede intentar usar una fuente como formControl , luego use ngOnChanges para obtener los cambios de la entrada this.deliveryAcross , para que pueda escribirlo nuevamente en formControl .
Prueba lo siguiente:
ngOnInit() { // Move this part to the `ngOnInit` so you can read the value of `this.deliveryAcross` input, // and set it as initial value of the form-control. this.minFormControl = new FormControl(this.deliveryAcross?.min, [ Validators.required, Validators.min(1) ]); } // implement `OnChanges` interface to get the input changes. ngOnChanges(changes: SimpleChanges) { if(changes.deliveryAcross) { this.minFormControl.setValue(this.deliveryAcross?.min); } } <mat-form-field class="full-width" [@transformRightLeftStateTrigger]="stateDown | async" > <input matInput [formControl]="minFormControl" [errorStateMatcher]="errorStateMatcher" placeholder="Minimaal" appDeliveryAcross autocomplete="off" [key]="'min'" [component]="'delivery-across'" type="number" /> </mat-form-field>