Tengo un menú desplegable basado en la selección del país. Estoy configurando un valor previo en selección múltiple (2 valores). botón deshabilitado incluso después de seleccionar valores. incluso después de que el control de formulario tenga un botón de valor

Mi código

 <form [formGroup]="myForm"> <div class="p-fluid p-formgrid p-grid"> <div class="p-field p-col-12 p-md-3"> <label for="country"> Country * :</label> (onChange)="fetch()" id="country"></p-dropdown> </div> <div class="p-field p-col-12 p-md-3"> <label for="country"> Location * :</label> <!--{{selectedDefaultValue}}--> <!-- [Sydney, Melbourne]--> <p-multiSelect [options]="locations" [defaultLabel]="selectedDefaultValue" [(ngModel)]="defaultValues" formControlName="location" placeholder="Select Locations" class="form-control" id="locations"></p-multiSelect> </div> </div> <div class="p-fluid p-formgrid p-grid"> <div class="p-field p-col-12 p-md-2"> <button pButton type="button" label="Submit" [disabled]="!myForm.valid" (click)="onProceed()" ></button> </div> ts code locations value 0:{label: 'Sydney', value: 'Sydney'} 1:{label: 'Melbourne', value: 'Melbourne'} this.locations.map((item) => this.defaultValues.push(item.value)); this.defaultValues1.push('All'); this.selectedValue = this.defaultValues[0]; initForm() { this.myForm= this.fb.group({ country: ['', Validators.required], location: ['', Validators.required], }); }