如果没有选择，如何使 angular 单选组标签变红？

Question

我有一个带有两个单选按钮的 angular 单选组。 None 最初被选中。在这种情况下，我希望该组的标签为红色。当其中一项被选中时，移除红色。

.html

        <div>
           <label for="odr" [ngClass]="{'invalid': myForm.get('odr').invalid}">Our Dear Relative: </label>
        </div>
        <div>
           <mat-radio-group [formControl]="odr" value={{odr.value}}>
             <mat-radio-button name="odr" required>Sally</mat-radio-button>
             <mat-radio-button name="odr" required>Sue</mat-radio-button>
           </mat-radio-group>
        </div>

.ts

  myForm = new FormGroup({
    odr: new FormControl(''),
  });

.css

.invalid{
    color:"red";
}

所以我希望标签“我们亲爱的亲戚：”在最初未选择任何内容时显示为红色，然后在选中其中一个时恢复正常。目前，此代码不会将标签变为红色。

Answer 1

标签不是红色的，因为您的控件没有任何验证器。

这应该可以解决您的问题

 myForm = new FormGroup({
    odr: new FormControl(null, Validators.required),
  });

Answer 2

我认为，您应该尝试在创建表单时添加验证器required，并额外触发updateValueAndValidity，这样所有验证器都将被执行并且您的标签将变为红色

 myForm = new FormGroup({
    odr: new FormControl('', [Validators.required]),
 });

 myForm.updateValueAndValidity();

Answer 3

这三个文件都包含错误，尤其是 html 文件。因此，我将向您提供正确的设置方法。

  myForm = new FormGroup({
    odr: new FormControl('', Validators.required),
  });

<form [formGroup]="myForm">
  <div>
    <label for="odr" [ngClass]="{ invalid: myForm.get('odr')?.invalid }">
      Our Dear Relative:
    </label>
  </div>
  <mat-radio-group id="odr" formControlName="odr">
    <mat-radio-button value="Sally">Sally</mat-radio-button>
    <mat-radio-button value="Sue">Sue</mat-radio-button>
  </mat-radio-group>
</form>

.invalid {
  color: red;
}

（red 两边没有引号）

如果没有选择，如何使 angular 单选组标签变红？

How to make angular radio group label red if nothing selected?

html

css

forms

angular-directive

angular