Angular Material 单选按钮组需要验证不起作用

Question

我正在尝试在用户单击“提交”时验证单选按钮组。文本字段和下拉列表在无效时显示红色，但单选按钮颜色在无效时不会改变。有什么建议吗？

我正在使用属性 [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }" 将字段突出显示为红色。

我在 Angular 6 中使用 Angular Material 2。我还尝试从单选按钮组中删除 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

要解决使用 Angular Material 提交或跳转时的验证错误，请在 html 中使用以下代码:

// touched checks if the radio button is interacted with
<mat-error *ngIf=Form.get('RadioButton).Error('required') && 
    Form.get('RadioButton')?.touched"> Required field </mat-error>

在 TS 文件中:

form: FormGroup = new FormGroup({
    RadioButton: new FormControl('', Validators.required)
})

在保存或提交方法中使用下面的方法:

onSubmit() {
    if(this.Form.valid) {
        // ...
    } else {
         this.Form.markallAsTouched()
    }
}