When the 3rd dropdown value is selected in the first field dropdown, it enables the 2nd field. However, when I edit and change a different value, since the 2nd field is disabled, I receive null or undefined as the value. I want the 2nd field to retain its value if the 1st field is not changed in edit mode.
HTML:
TS:
private FormInit() {
//Add
if (!this.Details) {
this.detailsForm = this.FB.group({
Type: ['', Validators.required],
ID: [{ value: 0, disabled: true }],
});
} else {
// edit
this.detailsForm = this.FB.group({
Type: [this.Details.data.Type, Validators.required],
SourceID: [{ value: this.Details.data.ID, disabled: true }],
});
if (this.Details.mode == 'readOnly') {
this.detailsForm.disable();
}
}
}
ADD and Edit functions:
public save() {
let addParams = this.detailsForm.value;
addParams.Type = addParams.Type ? addParams.Type: 0;
this.Service.add(addParams).subscribe(res => {
console.log(res);
this.successMessagePopUp(res);
})
}
public update() {
let updateParams = this.detailsForm.value;
this.Service.update(updateParams).subscribe(res => {
this.successMessagePopUp(res)
})
}
I am looking for a solution where, when the 3rd dropdown value is selected, the 2nd field remains enabled in edit mode and only gets disabled if another value is selected?