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

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

- Jmunndi

---

不，这与相关性无关，但不要像使用jQuery那样操纵DOM，这正是Angular所不提倡的 ;) - AT82

同意。我想让Angular或Bootstrap处理验证。 - Jmunndi

你的 is-invalid 类的 CSS/SCSS 源代码在哪里？ - G. Tranter

"is-invalid" 是 Bootstrap 的 CSS 类。 - Jmunndi

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

- Vishnu

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 2

你写的是markallAsTouched()。注意你的"all"中的小写字母"a"。

让我们来纠正一下：

    if(this.Form.valid) {
        // ...
    } else {
         this.Form.markAllAsTouched()
    }
}````

- K S