Angular Reactive forms - Default value for controls not working

I want to have a preselected option on my dropdown list. i set to preSelectedLegalType the value on ngOnInit but i can't display it.How can i display this value?

My ts file

export class BusinessDetailsComponent implements OnInit {
legalTypes: any = ["Α.A.", "B.B.", "C.C.", "D.D.", "Ε.Ε."];
preSelectedLegalType: string = this.stateService.legalEntity.LegalType;

constructor(private stateService: StateService) {
this.businessDetailsForm = this.createForm();
}

ngOnInit() {
this.businessDetailsForm.controls['legalType'].setValue(
this.preSelectedLegalType, {onlySelf: true}
);
}

createForm() {
return this.fb.group({
legalType: [this.preSelectedLegalType, [Validators.required]],
businessName: ['', {validators: [Validators.required]}]
});
}
}


html

<select class="form-control custom-select-text" id="legalType" formControlName="legalType" required>
<option *ngFor="let legalType of legalTypes" [ngValue]="legalType" class="testhover" >{{legalType}}</option>
</select>

Continue reading...