Angular: 如何让Mat-Slide-Toggle 充当单选按钮？

Question

我有一个包含 1 个输入字段和 1 个 mat-slide-toggle 的动态表单。我想要的是假设如果表单获取 4 个 mat-slide-toggle 那么如果我设置任何一个切换 true 那么其他的将自动成为 false.

HTML

<h3>Options & Answers</h3>
<div formArrayName="options">
  <ul *ngFor="let o of updateQuestionForm.get('options')['controls']; let i = index;" [formGroupName]="i"
    style="list-style: none;">
    <li style="display: inline-block; margin-right: 10px;">
      <mat-form-field>
        <mat-label>Option</mat-label>
        <input matInput formControlName="optionText">
      </mat-form-field>
    </li>
    <li style="display: inline-block;">
      <mat-label>Answer</mat-label><br>
      <mat-slide-toggle color="primary" formControlName="answer"></mat-slide-toggle>
    </li>
  </ul>
</div>

当前情景：

但我希望如果我点击第二个选项，那么第三个选项将自动获得 false。

这是我在 Stackblitz 中的 example。

请帮帮我。

Answer 1

使用第三张幻灯片的[checked]属性设置FALSE取决于第二张幻灯片检查

例如

  <mat-slide-toggle
      class="example-margin"
      [color]="color"
      [checked]="checked">
    Slide me!
  </mat-slide-toggle>

第二张幻灯片检查时检查的值设置为 false。

Answer 2

您可以使用 change() 提供的事件回调 mat-slide-toggle and the callback method makes sure only one slider is set to true (take a look at this stackBlitz) -

<div formArrayName="options">
    <ul *ngFor="let o of updateQuestionForm.get('options')['controls']; let i = index;" [formGroupName]="i"
        style="list-style: none;">
        <li style="display: inline-block; margin-right: 10px;">
            <input formControlName="option_text" placeholder="Text">
        </li>
        <li style="display: inline-block;">
            <mat-slide-toggle color="primary" formControlName="answer" (change)="toggle(o, i)"> //<--- this event handler
            </mat-slide-toggle>
        </li>
    </ul>
</div>

然后在你的组件中 -

toggle(event, i) {
    const formArray = <FormArray>this.updateQuestionForm.controls["options"];
    const len = formArray.length;
    for (let j = 0; j < len; j++) {
      if (event.value && i !== j) {
        formArray.at(j)["controls"]["answer"].setValue(false);
      }
    }
  }

Answer 3

考虑一下这种方法，

捕获事件change()并传递索引的值i
将所有答案设置为 false
将点击的答案设置为真。这种方法将确保如果选择了一个答案，那么除非选择另一个答案，否则它将保持选中状态，就像单选按钮

    <div formArrayName="options">
        <ul *ngFor="let o of updateQuestionForm.get('options')['controls']; let i = index;" [formGroupName]="i"
            style="list-style: none;">
            <li style="display: inline-block; margin-right: 10px;">
                <mat-form-field>
                    <mat-label>Option</mat-label>
                    <input matInput formControlName="optionText">
      </mat-form-field>
            </li>
            <li style="display: inline-block;">
                <mat-label>Answer</mat-label><br>
                <mat-slide-toggle (change)='updateAnswer(i)' color="primary" formControlName="answer">
                </mat-slide-toggle>
            </li>
        </ul>
    </div>

updateAnswer(i) {
    const controls = this.updateQuestionForm.get("options")["controls"];
    controls.forEach(control => {
      control.get("answer").setValue(false);
    });
    controls[i].get("answer").setValue(true);
  }

See this stackblitz demo

Answer 4

尝试这个简单的解决方案，您可以使用尽可能多的滑块。

         <mat-slide-toggle name="type1" [(ngModel)]="type1" (change)='onChange($event, 1)'>Type 1</mat-slide-toggle>
         <mat-slide-toggle name="type2" [(ngModel)]="type2" (change)='onChange($event, 2)'>Type 2</mat-slide-toggle>
        
         public typeRadioValue = 1;
         public type1 = true;
         public type2 = false;
         onChange($event, type)
          {
            this.typeRadioValue = type;
            if (type == 1) {
              if ($event.checked) {
                this.type2 = false;
              } else {
                this.type2 = true;
              }
            } else {
              if ($event.checked) {
                this.type1 = false;
              } else {
                this.type1 = true;
              }
            }
          }

Angular: 如何让Mat-Slide-Toggle 充当单选按钮？

Angular: How to make Mat-Slide-Toggle to work as radio button?

typescript

angular-material

angular

angular9