当用户单击“提交”时,我尝试验证单选按钮组。文本字段和下拉列表在无效时显示红色,但单选按钮颜色在无效时不会更改。有什么建议吗?
我使用属性
[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);
}
}
我希望如果我不选择单选按钮选项,它会以红色显示为无效。
要解决使用角度材料提交或选项卡时的验证错误,请在 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()
}
}
您已经编写了markallAsTouched()。注意“all”中的小写“a”。
让我们纠正一下:
if(this.Form.valid) {
// ...
} else {
this.Form.markAllAsTouched()
}
}````