Tengo una variedad de objetos, digamos
const countries = [ { "country": "Afghanistan", "region": "Asia" }, { "country": "Albania", "region": "Europe" }, { "country": "Algeria", "region": "Africa" } ];Tengo 2 campos de entrada, País y Región. Si el usuario selecciona el país usando la opción de selección, necesito que mi campo de región se establezca automáticamente en la región correspondiente de ese objeto.
<div class="form-group stylingtext mt-3"> <label for="" class="pb-2">Movie Country</label> <select class="form-select" aria-label="Default select example" formControlName="movie_country" > <option *ngFor="let country of countries" [value]="country.country" > {{country.country}} </option> </select> </div> <div class="form-group stylingtext mt-3"> <label for="" class="pb-2">Movie Region</label> <input class="form-control rounded-5" formControlName="movie_region" required > </div>También probé (cambiar) el evento en seleccionar y usé ngmodel en el área de entrada de la región. Pero no funciona. Puede alguien ayudarme con esto?
ej.: si selecciono "Argelia" en el país, quiero "África" en el área de entrada de la región.
Puede intentar observar los cambios en el valor del país de esta manera:
private destroy$ = new Subject<void>(); ngOnInit(): void { this.formGroup.controls.movie_country.valueChanges.pipe( takeUntil(this.destroy$), ).subscribe( country => this.formGroup.controls.movie_region.patchValue(country.region) ) } ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete(); } Donde formGroup es el nombre de su control FormGroup. Y usa el asunto destroy$ para cancelar tu suscripción.