एक फार्म ऐरे में निष्क्रिय प्रतिक्रियाशील रूप का चयन करें नियंत्रण

मैं एक प्रतिक्रियाशील रूप में एक स्थिति की जांच करके एक चयन प्रपत्र नियंत्रण को अक्षम करने का प्रयास कर रहा हूं और मैं इसे अपने प्रपत्र घटक में गतिशील रूप से नहीं कर सका। सोच रहा था कि क्या पहले किसी ने ऐसा किया?

let control = <FormArray>this.scheduleForm.controls.schedulingAvailability;
this.scheduleObj.schedulingAvailability.forEach(x => {
control.push(this.formBuilder.group({
day: x.day,
startTime: x.startTime,
status: x.status
}))
if(x.status) {
this.scheduleForm.get("x.startTime").enable();
} else {
this.scheduleForm.get("x.startTime").disable();
}
})

और मेरे घटक में, मैंने इसे निम्नानुसार सेट किया है

<div formArrayName="schedulingAvailability">
<div *ngFor="let d of scheduleForm.controls.schedulingAvailability.controls; let i=index">
<div formGroupName="{{i}}">
<div class="row">
<div class="col-md-1">
<label class="checkbox">
<input type="checkbox" formControlName="status">
<span class="checkbox__input"></span>
<span class="checkbox__label">{{ scheduleObj.schedulingAvailability[i].day }}</span>
</label>
</div>
<div class="col-md-2">
<div class="form-group__text select">
<select formControlName="startTime">

उत्तर:

वैसा कोई वैरिएबल नहीं है this.scheduleForm.get("x.startTime"). startTime फार्म में मौजूद है schedulingAvailability। तो आपको अपने पुनरावृत्ति में सूत्रधार के उस वर्तमान सूचकांक तक पहुंचने की क्या आवश्यकता है। तो आप क्या करेंगे, को बदलना है forEach ए के लिए for इसके बजाय लूप, ताकि हम पुनरावृत्ति के वर्तमान सूचकांक की पकड़ प्राप्त कर सकें:

let control = <FormArray>this.scheduleForm.controls.schedulingAvailability;

for (let i = 0; i < this.scheduleObj.schedulingAvailability.length; i++) {
control.push(this.formBuilder.group({
status: this.scheduleObj.schedulingAvailability[i].status,
startTime: this.scheduleObj.schedulingAvailability[i].startTime
}))

// access the current formgroup of your formarray
let fg = control.get([i])
if (fg.get("status").value) {
fg.get("startTime").enable();
} else {
fg.get("startTime").disable();
}
}

StackBlitz

संपादित करें: जैसा कि मूल्य को अक्षम किया जा सकता है, हमें यह याद रखना होगा कि यह फॉर्म वैल्यू में शामिल नहीं है। इसलिए यदि आप अक्षम मान भी प्राप्त करना चाहते हैं, तो उपयोग करें this.scheduleForm.getRawValue()