首页 文章

将mat-radio-button设置为表单中的必填字段

提问于
浏览 次
3

我在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但两个都不行 .

但是，如果我没有选择单选按钮，并且我输入数量，则表单将显示为有效，并且将启用提交按钮 . 但是，如果没有选择单选按钮，我不希望启用提交按钮，这样我该怎么做？

谢谢

angular radio-button radio-group

2 回答

  • 2

    您必须将 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 只是一个字符串

    回复于
  • 0

    您需要在使用模板驱动表单时注册控件 . 控件需要有一个 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>
    回复于

相关问题