Требуется проверка группы радиокнопок Angular Material. - PullRequest
0 голосов
/ 26 января 2019

Я пытаюсь проверить группу переключателей, когда пользователь нажимает кнопку Отправить.Текстовые поля и раскрывающиеся списки отображаются красным, если они недействительны, но цвет переключателей не изменяется, если они недействительны.Любые предложения?

Я использую атрибут [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }", чтобы выделить поле красным цветом.

Я использую Angular Material 2 с Angular 6. Я также попытался удалить требуемый атрибут из радиогруппа кнопок и только что добавленные обязательные для переключателей, но это не сработало.

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

Я ожидаю, что если я не выберуопция переключателя, она отображается красным как недействительная.

...