i have one dropdown based on selection of country i am setting pre value in multiselect (2 values). disabled button even after selecting values. fpeven after form control has value button
My code
<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],
});
}
Most probably,
The formControl has no value inside it.
Try setValue() for allocating values inside formControls.