使 mat-radio-button 成为表单中的必填字段

Posted 2023-03-05

【中文标题】使 mat-radio-button 成为表单中的必填字段

【英文标题】：Make mat-radio-button a required field in a form

【发布时间】：2019-01-09 01:27:52

【问题描述】：

我在 Angular 6 中使用了一个表单，并且在这种情况下我禁用了提交按钮：

<button tabindex="-1" mat-raised-button class="submit-btn" color="primary" type="submit" [disabled]="!EditItemForm.form.valid || !quantityIsValid(newQuantity.value)">Save</button>

我在 mat-radio-group 中有 2 个 mat-radio-button 字段，如果没有选择任何单选按钮，我想禁用提交按钮。

这是我尝试过的：

<form #EditItemForm="ngForm" (ngSubmit)="save(newQuantity.value)">
    <mat-radio-group>
        <mat-radio-button (click)="setType('Consumable')" value="1" #consumable name="consumable" required>Consumable</mat-radio-button>
        <mat-radio-button (click)="setType('Returnable')" value="2" #returnable name="returnable" required>Returnable</mat-radio-button>
    </mat-radio-group>

    <mat-form-field>
        <input matInput [ngModel]="data.quantity" name="newQuantity" #newQuantity placeholder="Quantity"
            type="number" required>
    </mat-form-field>

    <mat-dialog-actions>
        <button tabindex="-1" mat-raised-button [mat-dialog-close]="false">Cancel</button>
        <button tabindex="-1" mat-raised-button class="submit-btn" color="primary" type="submit" [disabled]="!EditItemForm.form.valid || !quantityIsValid(newQuantity.value)">Save</button>
    </mat-dialog-actions>
</form>

所以我已经将 mat-radio-buttons 设为必需，我也尝试将 mat-radio-group 设为必需，但两者都不起作用。

但是，如果我没有选择单选按钮，并且我输入了一个数量，那么该表单将显示为有效并且它会启用提交按钮。但是，我不希望在没有选择单选按钮时启用提交按钮，我该怎么做呢？

谢谢

【参考方案1】：

您必须将ngModel 和name 添加到您的mat-radio-group。 Als 使该组成为必需，而不是 mat-radio-buttons：

<form #EditItemForm="ngForm" (ngSubmit)="save(1)">
    <mat-radio-group required [ngModel]="selectedRadio" name="radio">
        <mat-radio-button (click)="setType('Consumable')" value="1">Consumable</mat-radio-button>
        <mat-radio-button (click)="setType('Returnable')" value="2">Returnable</mat-radio-button>
    </mat-radio-group>

   <button tabindex="-1" mat-raised-button class="submit-btn" color="primary" type="submit" [disabled]="!EditItemForm.valid">Save</button>
</form>

<p>Form valid:  EditItemForm.valid </p>

为简单起见，我排除了quantity 控件。 selectedRadio 只是一个字符串

【讨论】：

如果我使用响应式表单，为什么我需要添加 ngModel 属性？肯定还有别的办法吗？

【参考方案2】：

您需要在使用模板驱动表单时注册您的控件。控件需要有一个name 和ngModel 指令才能将它们绑定到表单。

修正如下：

<mat-radio-group name="radioControl" ngModel>
    <mat-radio-button (click)="setType('Consumable')" value="1" #consumable name="consumable" required>Consumable</mat-radio-button>
    <mat-radio-button (click)="setType('Returnable')" value="2" #returnable name="returnable" required>Returnable</mat-radio-button>
</mat-radio-group>