我想知道一种在相同样式中验证所需复选框的方法 Angular Material 处理其他控件的验证 - 在提交表单时,除非触摸,否则控件显示为红色。
我想我可以用 ng-style
做到这一点,但是,我想不出一种方法来检查表单是否已提交
这是 HTML 的片段
<form [formGroup]="frmFinish" name="frmFinish">
<mat-checkbox required formControlName="check1">Discussed Confidentiality and Information Sharing with Service User</mat-checkbox>
<mat-checkbox required formControlName="check2">Discussed Disposal and Storage of Injecting Equipment and Substances</mat-checkbox>
<mat-checkbox required formControlName="check3">Discussed Overdose Risk and Prevention</mat-checkbox>
<mat-form-field>
<textarea formControlName="note" [(ngModel)]="stepFive.note" matInput placeholder="Any Additional Notes" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5"></textarea>
<mat-hint align="end">This will be added to the profiles note's</mat-hint>
</mat-form-field>
<mat-card-actions>
<button mat-raised-button type="button" class="nav-btn pull-right" (click)="fillForm()" style="background: red">Fill Form</button>
<button mat-raised-button class="nav-btn pull-right" style="margin-left:5px;" (click)="createProfile()" type="submit">Finish</button>
<button mat-raised-button matStepperPrevious class="nav-btn pull-right">Previous</button>
</mat-card-actions>
</form>
这是 typescript :
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CreateProfileComponent } from '../create-profile.component';
@Component({
selector: 'step-five-component',
templateUrl: './step-five.component.html',
styleUrls: ['../create-profile.component.css']
})
export class StepFiveComponent {
frmFinish: FormGroup;
stepFive = {
note: null
};
constructor(private formBuilder: FormBuilder) {
this.frmFinish = this.formBuilder.group({});
}
ngOnInit() {
this.frmFinish = this.formBuilder.group({
note: ['', Validators.required],
check1: ['', Validators.required],
check2: ['', Validators.required],
check3: ['', Validators.required],
});
}
createProfile(){
if(this.frmFinish.valid){
console.log('Creating profile..');
}else{
}
}
fillForm(){
this.stepFive.note = 'asdasd';
}
}
最佳答案
这在 Angular 版本 2.3.0 中得到了解决。
只需使用:Validators.requiredTrue
而不是 Validators.required
。
(参见 GitHub 问题 #11459。参见 Angular 文档 requiredTrue)
关于 Angular Material 复选框验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48519043/