我有一個帶有兩個單選按鈕的角度單選組。最初沒有選擇它們。在這種情況下，我希望該組的標簽為紅色。當其中一個被選中時，去掉紅色。
.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";
}
所以我希望標簽“我們親愛的親戚：”在最初沒有選擇任何內容時為紅色，然后如果其中一個被選中則恢復正常。目前，此代碼不會將標簽變為紅色。
uj5u.com熱心網友回復：
所有這三個檔案都包含錯誤，尤其是 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）
uj5u.com熱心網友回復：
標簽不是紅色的，因為您的控制元件沒有任何驗證器。
這應該可以解決您的問題
myForm = new FormGroup({
odr: new FormControl(null, Validators.required),
});
uj5u.com熱心網友回復：
我認為，您應該在創建表單時嘗試添加 Validator required，并另外觸發updateValueAndValidity，在這種情況下，所有驗證器都將被執行，并且您的標簽將為紅色
myForm = new FormGroup({
odr: new FormControl('', [Validators.required]),
});
myForm.updateValueAndValidity();
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453549.html