gpt4 book ai didi

angular - 禁用表单数组中的响应式(Reactive)表单选择表单控件

转载 作者:行者123 更新时间:2023-12-02 11:08:37 25 4
gpt4 key购买 nike

我试图通过检查 react 表单中的条件来禁用选择表单控件,但我无法在表单组件中动态执行此操作。想知道以前是否有人这样做过?

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 存在于表单Array schedulingAvailability 中。那么您需要在迭代中访问 formarray 的当前索引。因此,您要做的就是将 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()

关于angular - 禁用表单数组中的响应式(Reactive)表单选择表单控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48289639/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com