在角垫对话框中单击标签上的检查单选按钮答案

【问题标题】：Check radiobutton on label click in angular Mat Dialog在角垫对话框中单击标签上的检查单选按钮
【发布时间】：2021-09-16 02:06:02
【问题描述】：

我尝试以角度创建自定义评分栏，它似乎在一个简单的组件中运行良好，但我不得不将它移动到 MatDialog 并且它导致了某些问题。在初始设置中，我的输入设置为display: none，因为单击标签时可以检查单选按钮。（同样，在简单组件中效果很好）在 MatDialog 组件中，我无法再在标签单击时检查它。有什么我错过的吗？是什么导致了问题？

提前感谢您的想法！

我的 app-new-review-modal.html：

<mat-dialog-content>
<form [formGroup]="rate">
    <div class="rating" >
      <input type="radio" value="5" name="rateStar" id="star5" formControlName="rateStar">
      <label for="star5"></label>
      <input type="radio" value="4" name="rateStar" id="star4" formControlName="rateStar">
      <label for="star4"></label>
      <input type="radio" value="3" name="rateStar" id="star3" formControlName="rateStar">
      <label for="star3"></label>
      <input type="radio" value="2" name="rateStar" id="star2" formControlName="rateStar">
      <label for="star2"></label>
      <input type="radio" value="1" name="rateStar" id="star1" formControlName="rateStar">
      <label for="star1"></label>
    </div>
  </form>
</mat-dialog-content>

我的控制器：

import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-new-review-modal',
  templateUrl: './new-review-modal.component.html',
  styleUrls: ['./new-review-modal.component.scss']
})
export class NewReviewModalComponent implements OnInit {
  rate: FormGroup;

  constructor(private fb: FormBuilder) {
    })

  }

  ngOnInit(): void {
    this.rate = this.fb.group({
      rateStar: []
    });
  }

}

css（如果需要）：

.rating {
  width: 155px;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  direction: rtl;

  label {
    float: right;
    cursor: pointer;
    color: #676767;

    &:before {
      content: "\2605";
    }
  }

  input {
    display: none;
  }

  input:checked ~ label,
  label:hover ~ label,
  label:hover {
    color: rgb(120, 140, 116);
  }

}

【问题讨论】：

使评分栏的Z-index高于matDialog。

标签： angular typescript angular-material modal-dialog angular-reactive-forms

【解决方案1】：

试试这个代码：

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, FormControl } from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  rate: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.rate = this.fb.group({
      rateStar: new FormControl()
    });

    this.setValue("4"); // default value
  }

  setValue(rateStar: string): void {
    this.rate.patchValue({ rateStar });
  }
}

你可以像这样在 HTML 中获得你的价值 -

<p>
  {{this.rate.get('rateStar').value}}
</p>

https://codesandbox.io/s/laughing-heyrovsky-kpj13?from-embed

【讨论】：