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

Posted 2023-03-13

【中文标题】在角垫对话框中单击标签上的检查单选按钮

【英文标题】：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。

【参考方案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