未打印验证消息....我已将名字的最小长度设置为 3，因此如果长度不超过 3，它会在侧面显示小十字（表示出现问题），但不会打印最小长度为 3 的消息。所有属性都相同...
下面我附上了 html 和 ts 文件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form [formGroup]="registerform" (ngSubmit)="onsubmit()">
<div class="form-group">
<label for="firstname">First Name:</label>
<input formControlName="firstname" type="text" class="form-control" id="firstname" placeholder="Enter first name"
[ngClass]="{ 'is-invalid': submitted && f.firstname.errors }"/>
<div *ngIf="submitted && f.firstname.errors" class="invalid-feedback">
<div *ngIf="f.firstname.errors.required">first name is required</div>
<div *ngIf="f.firstname.errors.minlength">first name should be minimum 3 {{firstname.errors.minlength.requiredlength}}characters</div>
</div>
</div>
<div class="form-group">
<label for="lastname">Last Name:</label>
<input formControlName="lastname" type="text" class="form-control" id="lastname" placeholder="Enter last name"
[ngClass]="{'is-invalid':submitted && f.lastname.errors}"/>
<div *ngIf="submitted && f.lastname.errors" class="invalid-feedback">
<div *ngIf="f.lastname.errors.required">last name is required</div>
<div *ngIf="f.lastname.errors.minlength">last name should be minimum 5 {{lasttname.errors.minlength.requiredlength}}characters</div>
</div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input formControlName="email" type="email" class="form-control" id="email" placeholder="Enter email"
[ngClass]="{ 'is-invalid': submitted && f.email.errors }"/>
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">email is required</div>
<div *ngIf ="f.email.errors.pattern">please provide a valid email id</div>
</div>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input formControlName="password" type="password" class="form-control" id="password" placeholder="Enter password "
[ngClass]="{'is-invalid':submitted && f.password.errors}"/>
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">password is required</div>
<div *ngIf="f.password.errors.minlength">password should be minimum 6 {{password.errors.minlength.requiredlength}}characters</div>
</div>
</div>
<div class="form-group">
<label for="mobilenumber">Mobile Number:</label>
<input formControlName="mobilenumber" type="number" class="form-control" id="mobilenumber" placeholder="Mobile number"
[ngClass]="{'is-invalid':submitted && f.mobilenumber.errors}"/>
<div *ngIf="submitted && f.mobilenumber.errors" class="invalid-feedback">
<div *ngIf="f.mobilenumber.errors.required">mobile number is required</div>
<div *ngIf ="f.mobilenumber.dirty && f.mobilenumber.errors.pattern">Please, Enter 10 digit Mobile Number</div>
<div *ngIf="f.mobilenumber.errors.max">mobile number should be maximum 10 {{mobilenumber.errors.max.requiredlength}}characters</div>
</div>
</div>
<fieldset class="form-group">
<div class="row">
<label for="gender">Gender:</label>
<!-- <legend class="col-form-label col-lg-2 pt-0">Gender</legend> -->
<!-- <div class="col-sm-10"> -->
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1" style="padding-left: 20px;">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2" style="padding-left: 20px;">
Female
</label>
</div>
<!-- </div> -->
</div>
</fieldset>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary" >Submit</button>
<button class="btn btn-secondary" type="reset" (click)="onreset()">Cancel</button>
</form>
</div>
</body>
</html>
打字稿文件
import { FormBuilder, FormGroup, Validators, Form, ReactiveFormsModule } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { invalid } from '@angular/compiler/src/render3/view/util';
@Component({
selector: 'ngx-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
registerform: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.registerform = this.formBuilder.group({
firstname: ['', [Validators.required, Validators.minLength(3)]],
lastname: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]
{2,4}$")]],
password: ['', [Validators.required, Validators.minLength(6)]],
mobilenumber: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$"),
Validators.max(10)]],
gender: ['', Validators.required],
});
}
get f() {
return this.registerform.controls;
}
onsubmit() {
this.submitted = true;
if (this.registerform.invalid) {
return;
}
alert('SUCCESS!! :-)\n\n' + JSON.stringify
(this.registerform.value, null, 4));
}
onreset() {
this.submitted = false;
this.registerform.reset();
}
}
