Question

嗨，我正在使用反应形式将值绑定到单选按钮。现在，值已绑定，但是如果我从yes to no更改值，则在formcontrol中不会更新我使用过的对象数组中的值。谁能帮我解决这个问题，在这里我使用了反应形式，主要是因为如果切换按钮有任何变化，那么可以保存应用程序，或者我需要显示消息说没有要保存的更改，所以我使用了反应形式我为此感到震惊。谁能帮我解决这个问题。

TS：

this.musicForm = this.fb.group({
      musicPreferences: this.fb.array(this.musicPreferences.map(x => this.fb.control(x.boolValue))),
    });
    this.musicForm.valueChanges.subscribe(data => {
          this.formEdit = true;
          console.log('agentSettingsInfoForm', this.formEdit)
        })

DEMO

HTML：

 <div class="col pt-lg-4">
            <label for="" class="font-weight-bold">Agency Policy</label>
            <div class="row" formArrayName="musicPreferences">
              <div class="col columns-2">
                <div class="d-flex mb-3 w-100 justify-content-between align-items-center" *ngFor="let toggleValue of musicPreferences;let i = index">
                <label  for="{{toggleValue.id}}">{{toggleValue.label}}</label>
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-outline-primary" [class.active]="!toggleValue.boolValue" (click)="onItemChange(false,toggleValue.id)">
                    <input type="radio" name="options" id="option1" id="{{toggleValue.id}}"  [attr.checked]="toggleValue.boolValue"  [disabled]="isReadOnly" > No
                  </label>
                  <label class="btn btn-outline-primary " [class.active]="toggleValue.boolValue" (click)="onItemChange(true,toggleValue.id)">
                    <input type="radio" name="options" id="option2" id="{{toggleValue.id}}" [attr.checked]="toggleValue.boolValue"  [disabled]="isReadOnly" > Yes
                  </label>
                </div>
                </div>
              </div>
            </div>
          </div>

或使用此演示，是否可以使复选框像是和否按钮，使用css可以像上面那样演示该演示。 DEMO

使用反应形式在angular8中更改时如何将单选按钮值绑定到formcontrolname

0 个答案: