Estoy tratando de poblar la ciudad según el campo de código postal. Puedo hacer lo mencionado anteriormente usando la etiqueta html normal con el enlace de evento (keyup), pero con css tengo que usar (keyup.enter) que puede invocar la función que se enlaza con la llamada de evento pero no permite que el La función patchValue() funciona correctamente. Aquí hay un fragmento de mi código: -
editor.component.ts
profileForm = this.fb.group({ name: ['', Validators.required], address: this.fb.group({ zip: ['', Validators.required], city: ['', Validators.required]}) }); func(event: any){ this.profileForm.patchValue({ address:{ city: this.getCity(event.value) } }) } getCity = (theCurrentZip: any) => { return Object.keys(this. zipCode).filter(z => { return this.zipCode[z].includes(theCurrentZip) })[0] } zipCode: any = { "A": ["1", "2" ], "B":[ "3", "4",] };editor.componente.html
<div> <form (ngSubmit)="onSubmit()" #myForm="ngForm" class="profileForm"> <mat-form-field required> <input matInput id="name" placeholder="Contact Name" name="name" [(ngModel)]="name"> </mat-form-field > <div formGroupName="address"> <mat-form-field > <input matInput id="zip" (keyup)="func($event.target)" placeholder="Zip" name="zip" [(ngModel)]="zip" > </mat-form-field > <mat-form-field required> <input matInput id="city" placeholder="City" name="city" [(ngModel)]="city" > </mat-form-field > </div> <p> <button type="submit" mat-raised-button color = "primary">Submit</button> </p> </form> </div>Por lo que puedo ver, actualmente está mezclando el enfoque reactivo y basado en plantillas de las formas angulares.
El enfoque reactivo se usa en su editor.component.ts y el basado en plantillas en su editor.component.html .
Dado que su HTML está basado en plantillas, no es necesario llamar a patchValue porque el formulario y los controles del formulario no están vinculados al HTML. Entonces, para actualizar su HTML, necesita ajustar su implementación de func como sigue
func(event) { this.city = this.getCity(event.target.value); } Mi sugerencia para usted sería que elija uno de esos enfoques y no los mezcle (si no es absolutamente necesario). Además, debe usar nombres de funciones más significativos que func ;)