Assuming you are using a FormGroup to hold your reactive form, you can listen to the changes in the projectType and depending on the selected value you populate the list of projectPhases
in your ts file define a public property to hold the phasesOptionsList
public phasesOptions: any[];
and after initialising the formGroup you can add:
this.formGroup.get('projectType').valueChanges.subscribe((newValue) => {
if (newValue === 'Team Supplementation') {
this.phasesOptions = phasesList1;
}else if (newValue === 'Project') {
this.phasesOptions = phasesList2;
}
})
then in your html you always bind to the phasesOptions property
<div class="form-group col-md-6">
<label>Project Phase</label>
<select
class="form-control"
formControlName="projectPhase"
[ngClass]="{
'is-invalid':
projectForm.get('projectPhase').errors &&
projectForm.get('projectPhase').touched
}"
>
<option value=""></option>
<option
*ngFor="
let phase of phasesOptions
"
[ngValue]="phase"
>
{{ phase }}
</option>
</select>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…