我是angular的新手，我想知道反应式验证如何在angular 6.0中工作，我试图从最近的两周开始进行验证，有人可以帮助我进行验证吗？教我怎么做
非常感谢您的帮助，谢谢:)
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormsModule, FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'AngularProject';
constructor(private fb:FormBuilder)
{}
profileForm : FormGroup;
submitted = false;
ngOnInit(): void {
this.profileForm= this.fb.group({
firstName:['', [Validators.required]],
EmailMe:['',[Validators.required]]
});
}
onSubmit():void
{
this.submitted = true;
if (this.profileForm.invalid) {
return;
}
console.log(this.profileForm.value);
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.profileForm.value))
}
get f() {
return this.profileForm.controls;
}}
HTML部分在下面给出。
<form class="form-horizontal" [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">C3</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-2 control-label" for="fullName">Full Name</label>
<div class="col-sm-8">
<input id="fullName" type="text" class="form-control" formControlName="firstName"
[ngClass]="{ 'is-invalid': submitted && f.profileForm.errors }" >
<div *ngIf="f.firstName.errors.required">First Name is required {{f.profileForm.errors}}</div>
<div *ngIf=></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-8">
<input id="email" type="text" class="form-control" formControlName="EmailMe">
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" type="submit" [disabled]="!profileForm.valid">Save</button>
</div>
</div>
</form>
<!-- -->
<router-outlet></router-outlet>
您的验证检查似乎是错误的。在这里，尝试一下：
<form
class="form-horizontal"
[formGroup]="profileForm"
(ngSubmit)="onSubmit()">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">C3</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label
class="col-sm-2 control-label"
for="fullName">
Full Name
</label>
<div class="col-sm-8">
<input
id="fullName"
type="text"
class="form-control"
formControlName="firstName">
<div
*ngIf="profileForm.controls['firstName'].touched && profileForm.controls['firstName'].errors.required"
>
First Name is required
</div>
</div>
</div>
...
</div>
...
</div>
</form>
Angular也会在无效和触摸的表单控件上自动应用ng-invalid和ng-touched等类。因此，您可以利用它来简化CSS：
input.ng-touched.ng-invalid {
border: 1px solid red;
}
这是供您参考的工作样本StackBlitz。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句