Angular Material 單選按鈕組需要驗證不起作用

Question

當用戶單擊提交時，我正在嘗試驗證單選按鈕組。 文本字段和下拉列表在無效時顯示為紅色，但單選按鈕顏色在無效時不會更改。 有什么建議么？

我正在使用屬性[ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }"突出顯示紅色字段。

我將 Angular Material 2 與 Angular 6 一起使用。我還嘗試從單選按鈕組中刪除 required 屬性，然后將 required 添加到單選按鈕中，但這不起作用。

HTML

<!-- main app container -->
<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-md-8 offset-md-2">
        <h3>Angular 6 Template-Driven Form Validation</h3>
        <form name="form" (ngSubmit)="onSubmit(f)" #f="ngForm" novalidate>
          <div class="form-group">
            <label for="firstName">First Name</label>            
                <mat-radio-group #firstName name="firstName" [(ngModel)]="model.firstName" [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }" required>
                  <mat-radio-button [value]='1' >
                    Jack
                  </mat-radio-button>
                  <mat-radio-button [value]='2' >
                    Steve
                  </mat-radio-button>
                </mat-radio-group>
          </div>
          <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel"
              [ngClass]="{ 'is-invalid': f.submitted && lastName.invalid }" required />
            <div *ngIf="f.submitted && lastName.invalid" class="invalid-feedback">
              <div *ngIf="lastName.errors.required">Last Name is required</div>
            </div>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" name="email" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }"
              required email />
            <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
              <div *ngIf="email.errors.required">Email is required</div>
              <div *ngIf="email.errors.email">Email must be a valid email address</div>
            </div>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel"
              [ngClass]="{ 'is-invalid': f.submitted && password.invalid }" required minlength="6" />
            <div *ngIf="f.submitted && password.invalid" class="invalid-feedback">
              <div *ngIf="password.errors.required">Password is required</div>
              <div *ngIf="password.errors.minlength">Password must be at least 6 characters</div>
            </div>
          </div>
          <div class="form-group">
            <label for="confirmPassword">Confirm Password</label>
            <input type="password" class="form-control" name="confirmPassword" [(ngModel)]="model.confirmPassword"
              #confirmPassword="ngModel" [ngClass]="{ 'is-invalid': f.submitted && confirmPassword.invalid }" required />
            <div *ngIf="f.submitted && confirmPassword.invalid" class="invalid-feedback">
              <div *ngIf="confirmPassword.errors.required">Confirm Password is required</div>
              <div *ngIf="confirmPassword.errors.mustMatch">Passwords must match</div>
            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary" >Register</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

TS

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-default',
  templateUrl: './default.component.html',
  styleUrls: ['./default.component.css']
})
export class DefaultComponent implements OnInit {
  selection: { id: number; value: string; selected: boolean }[] = [{ id: 1, value: 'option1', selected: false}, { id: 2, value: 'option2', selected: true}];
  item: any;
  model:{
    firstName: string;
    lastName: string;
    email: string;
    password: string;
    confirmPassword:  string;
  } = { firstName: '',
    lastName: '',
    email: '',
    password: '',
    confirmPassword:  ''
  }
  constructor() { }

  ngOnInit() {
    $('.custom-form input.form-control').blur(function(e) {
      e.preventDefault();
      if (!$(this).val() === false) {
        $(this).parent('div').addClass('not-empty');
      } else {
        $(this).parent('div').removeClass('not-empty');
      }
    });
  }

  onSubmit(form: NgForm){
    console.log(form);
  }
}

我希望如果我不選擇單選按鈕選項，它會以紅色顯示為無效。

Answer 1

To get the validation error on submit or tabbing using angular material. Use below code in html

    <mat-error *ngIf=Form.get('RadioButton).Error('required) && 
    Form.get('RadioButton')?.touched"> Required field </mat-error>

In TS file
    form: FormGroup = new FormGroup({

    RadioButton: new FormControl('', Validators.required)
    })

Use below in the save or submit method 
    onSubmit()
    {
    if(this.Form.valid)
    {
    }
    else
    {
     this.Form.markallAsTouched()
     }
      }