web-dev-qa-db-ja.com

mat-radio-buttonをフォームの必須フィールドにする

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-button内に2つのmat-radio-groupフィールドがあり、ラジオボタンが選択されていない場合は送信ボタンを無効にしたいと思います。

これが私が試したものです：

<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>

したがって、私はマットラジオボタンを必須にしました。また、マットラジオグループも必須にしようとしましたが、どちらも機能しません。

ただし、ラジオボタンを選択せず​​に数量を入力すると、フォームは有効であるように見え、送信ボタンが有効になります。しかし、ラジオボタンが選択されていないときに送信ボタンを有効にしたくないので、どうすればよいですか？

ありがとう

angularradio-buttonradio-group
6
Michael

ngModel＆nameをmat-radio-groupに追加する必要があります。また、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は単なる文字列です

5
Tim Martens

テンプレート駆動型フォームを使用しているときに、コントロールを登録する必要があります。フォームにバインドするには、コントロールに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>
0
rgantla