多个输入字段之间的表单验证
Form Validation between multiple input fields
所以我有一个包含多个输入表单字段和嵌套表单组的表单。在嵌套的表单组中,验证应该是这样的,如果三个输入中的任何一个被填充,那么表单应该是有效的。此人可以填写所有内容,也可以只填写一个,并且表格应该是有效的。我的模板代码如下:
<h3 class="form-title">{{title}}</h3>
<form [formGroup]="formX" novalidate>
<div formGroupName="brandIdentifier">
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="brandName.valid && brandName.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="brandName.invalid && brandName.touched">close</mat-icon>
<input matInput type="text" placeholder="Brand Name" formControlName="brandName" />
</mat-form-field>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="brandId.valid && brandId.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="brandId.invalid && brandId.touched">close</mat-icon>
<input matInput type="text" placeholder="Brand Id" formControlName="brandId" />
</mat-form-field>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="contentId.valid && contentId.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="contentId.invalid && contentId.touched">close</mat-icon>
<input matInput type="text" placeholder="Content Id" formControlName="contentId" />
</mat-form-field>
</div>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="startTime.valid && startTime.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="startTime.invalid && startTime.touched">close</mat-icon>
<input matInput type="text" placeholder="Start Time" formControlName="startTime" />
</mat-form-field>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="endTime.valid && endTime.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="endTime.invalid && endTime.touched">close</mat-icon>
<input matInput type="text" placeholder="End Time" formControlName="endTime" />
</mat-form-field>
<button mat-raised-button color="primary" (click)="startAnalysis()" [ngClass]="{'form-valid':formX.valid, 'form-invalid':formX.invalid}">Submit</button>
<pre>{{formX.value | json}}</pre>
</form>
我该怎么做?使用 Validator class 是给定的,但我无法将其设为可选。
请按照以下步骤操作:
注意:我们只是告诉您如何解决您的问题。
在module.ts
中导入FormsModule、ReactiveFormsModule
从'@angular/forms'导入{FormsModule, ReactiveFormsModule};
@NgModule({
导入:[FormsModule, ReactiveFormsModule]})
修改您的html,例如
用户名
用户名是必需的。
用户名的长度必须至少为 4 个字符。
密码
密码是必需的。
密码必须至少有6个字符长。
忘记密码?
<div class="form-group">
<button type="submit" (click)='onSubmit()' dir-btn-click [disabled]="!loginForm.valid" class="btn btn-inverse btn-block">Sign in</button>
</div>
</form>
修改[yourcomponent].ts中的代码如下:
从“@angular/core”导入{组件};
从'@angular/forms';
导入{FormBuilder, FormGroup, Validators}
@组件({
选择器:'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
导出 class 登录组件 {
登录表单:表单组;
构造函数(私有fb:FormBuilder){
this.crateLoginForm()
}
获取用户名() { return this.loginForm.get('userName'); }
获取密码() { return this.loginForm.get('password'); }
crateLoginForm() {
this.loginForm = this.fb.group({
用户名:['', [Validators.required, Validators.minLength(4)]],
密码:['', [Validators.required, Validators.minLength(6)]]
})
}
onSubmit() {
让 userName= this.loginForm.value.userName;
让 pwd =this.loginForm.value.password;
}
}
您可以为此使用自定义验证器,为嵌套组应用自定义验证器,我们检查三个字段中至少有一个的值不是空字符串,所以这里有一个示例:
建筑形式:
this.myForm = this.fb.group({
nestedGroup: this.fb.group({
first: [''],
second: [''],
third: ['']
// apply custom validator for the nested group only
}, {validator: this.myCustomValidator})
});
自定义验证器:
myCustomValidator(group: FormGroup) {
// if true, all fields are empty
let bool = Object.keys(group.value).every(x => group.value[x] === '')
if(bool) {
// return validation error
return { allEmpty: true}
}
// valid
return null;
}
然后在您的表单中,您可以通过以下方式显示验证消息:
<small *ngIf="myForm.hasError('allEmpty','nestedGroup')">
Please fill at least one field
</small>
终于有一个DEMO :)
所以我有一个包含多个输入表单字段和嵌套表单组的表单。在嵌套的表单组中,验证应该是这样的,如果三个输入中的任何一个被填充,那么表单应该是有效的。此人可以填写所有内容,也可以只填写一个,并且表格应该是有效的。我的模板代码如下:
<h3 class="form-title">{{title}}</h3>
<form [formGroup]="formX" novalidate>
<div formGroupName="brandIdentifier">
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="brandName.valid && brandName.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="brandName.invalid && brandName.touched">close</mat-icon>
<input matInput type="text" placeholder="Brand Name" formControlName="brandName" />
</mat-form-field>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="brandId.valid && brandId.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="brandId.invalid && brandId.touched">close</mat-icon>
<input matInput type="text" placeholder="Brand Id" formControlName="brandId" />
</mat-form-field>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="contentId.valid && contentId.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="contentId.invalid && contentId.touched">close</mat-icon>
<input matInput type="text" placeholder="Content Id" formControlName="contentId" />
</mat-form-field>
</div>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="startTime.valid && startTime.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="startTime.invalid && startTime.touched">close</mat-icon>
<input matInput type="text" placeholder="Start Time" formControlName="startTime" />
</mat-form-field>
<mat-form-field class="full-width">
<mat-icon matSuffix color="primary" *ngIf="endTime.valid && endTime.touched">done</mat-icon>
<mat-icon matSuffix color="primary" *ngIf="endTime.invalid && endTime.touched">close</mat-icon>
<input matInput type="text" placeholder="End Time" formControlName="endTime" />
</mat-form-field>
<button mat-raised-button color="primary" (click)="startAnalysis()" [ngClass]="{'form-valid':formX.valid, 'form-invalid':formX.invalid}">Submit</button>
<pre>{{formX.value | json}}</pre>
</form>
我该怎么做?使用 Validator class 是给定的,但我无法将其设为可选。
请按照以下步骤操作:
注意:我们只是告诉您如何解决您的问题。
在module.ts
中导入FormsModule、ReactiveFormsModule从'@angular/forms'导入{FormsModule, ReactiveFormsModule};
@NgModule({ 导入:[FormsModule, ReactiveFormsModule]})
修改您的html,例如
用户名 用户名是必需的。 用户名的长度必须至少为 4 个字符。 密码 密码是必需的。 密码必须至少有6个字符长。 忘记密码?
<div class="form-group"> <button type="submit" (click)='onSubmit()' dir-btn-click [disabled]="!loginForm.valid" class="btn btn-inverse btn-block">Sign in</button> </div> </form>
修改[yourcomponent].ts中的代码如下:
从“@angular/core”导入{组件}; 从'@angular/forms';
导入{FormBuilder, FormGroup, Validators}@组件({ 选择器:'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) 导出 class 登录组件 {
登录表单:表单组;
构造函数(私有fb:FormBuilder){ this.crateLoginForm() }
获取用户名() { return this.loginForm.get('userName'); } 获取密码() { return this.loginForm.get('password'); }
crateLoginForm() { this.loginForm = this.fb.group({ 用户名:['', [Validators.required, Validators.minLength(4)]], 密码:['', [Validators.required, Validators.minLength(6)]] }) }
onSubmit() { 让 userName= this.loginForm.value.userName; 让 pwd =this.loginForm.value.password; }
}
您可以为此使用自定义验证器,为嵌套组应用自定义验证器,我们检查三个字段中至少有一个的值不是空字符串,所以这里有一个示例:
建筑形式:
this.myForm = this.fb.group({
nestedGroup: this.fb.group({
first: [''],
second: [''],
third: ['']
// apply custom validator for the nested group only
}, {validator: this.myCustomValidator})
});
自定义验证器:
myCustomValidator(group: FormGroup) {
// if true, all fields are empty
let bool = Object.keys(group.value).every(x => group.value[x] === '')
if(bool) {
// return validation error
return { allEmpty: true}
}
// valid
return null;
}
然后在您的表单中,您可以通过以下方式显示验证消息:
<small *ngIf="myForm.hasError('allEmpty','nestedGroup')">
Please fill at least one field
</small>
终于有一个DEMO :)