角材料单选按钮组要求验证不起作用

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);
  }
}

我希望如果不选择单选按钮选项，它会以红色显示为无效。