- 首页
- 其他开发
- 在表单字段-Angular-ReactiveForms 中至少更改一个值之前,使用验证更新表单不起作用
在表单字段-Angular-ReactiveForms 中至少更改一个值之前,使用验证更新表单不起作用
[英] Update form with Validation not working until atleast one value is changed in the form field-Angular- ReactiveForms
本文介绍了在表单字段-Angular-ReactiveForms 中至少更改一个值之前,使用验证更新表单不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当使用 put/update 方法时,按钮被禁用,直到触摸每个字段并且至少每个字段中的值被更改.而 post 方法运行良好.
Employee.component.html
<div class="input-row"><mat-form-field fxFlex><mat-label>名称</mat-label><输入value="{{data.emp.name}}"垫输入占位符=名称"表单控件名称=名称"必需的/></mat-form-field>
<div class="input-row"><mat-form-field fxFlex><mat-label>名称</mat-label><输入value="{{data.emp.designation}}"垫输入占位符=指定"formControlName="指定"必需的/></mat-form-field>
<br/><div class=""><按钮垫高按钮类型=重置"class="btn btn-危险宽度"(点击)=关闭()">关闭按钮> <按钮垫高按钮[禁用]="!f.valid"对class="btn btn-成功宽度正确"类型=提交">更新按钮>
</表单>
Employee.component.ts
editForm: FormGroup;构造函数(public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) 公共数据:任何,私人服务:EmployeeService) {}ngOnInit() {this.editForm = new FormGroup({id: new FormControl({ disabled: true }, Validators.required),名称:new FormControl("", [Validators.required,Validators.pattern(/^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/)]),名称:new FormControl("", [Validators.required,Validators.pattern(/^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/)])});}提交(){console.log(this.editForm.value);this.service.updateEmployee(this.editForm.value).subscribe(数据 =>{this.dialogRef.close();},错误 =>{控制台日志(错误);});}关闭() {this.dialogRef.close();}
即使使用模板驱动的表单,我也面临同样的问题.
解决方案
in app.module.ts从@rxweb/reactive-form-validators"导入 {RxReactiveFormsModule }
进口:[....,RxReactiveForms 模块]
在 app.component.ts 中
import { Component, OnInit } from '@angular/core';从@angular/forms"导入 {FormGroup,FormControl,Validators }从@rxweb/reactive-form-validators"导入 {RxFormBuilder,FormGroupExtension }@成分({选择器:'我的应用',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 OnInit {name = '角度';编辑表单:表单组;构造函数(私有表单生成器:RxFormBuilder){}ngOnInit(){this.editForm = this.formBuilder.group({id:[1, Validators.required],名称:[阿尼尔",[Validators.required,Validators.pattern(/^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/)]],名称:[软件工程",[Validators.required,Validators.pattern(/^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/)]]});}提交(){控制台日志(this.editForm.value)让 isDirty = (this.editForm).isDirty()}}
在 app.component.html 中
<main class="col-12"><h3 class="bd-title" id="content">脏检查示例</h3><br/><form [formGroup]="editForm" (ngSubmit)="onSubmit()" ><div class="form-group"><label>Id</label><input type="text" formControlName="id" class="form-control"/>
<div class="form-group"><label>名称</label><input type="text" formControlName="name" class="form-control"/>
<div class="form-group"><label>名称</label><input type="text" formControlName="designation" class="form-control"/>
<button [disabled]="!(editForm.valid ||!editForm['isDirty']())" class="btn btn-primary">更新</button></表单></main></div>
这里我在stackblitz中创建了一个例子
Angular 更新/编辑表单- StackBlitz
When working with put/update method the button is disabled until each and every field is touched and atleast on value in each field is changed. whereas post method is working perfectly fine.
Employee.component.html
<form
fxLayout="column"
[formGroup]="editForm"
#f="ngForm" (ngSubmit)="onSubmit()"
>
<div class="input-row">
<mat-form-field fxFlex>
<mat-label>Id</mat-label>
<input readonly
value="{{data.emp.id}}"
matInput #id disabled
formControlName="id"
required
/>
</mat-form-field>
</div>
<div class="input-row">
<mat-form-field fxFlex>
<mat-label>Name</mat-label>
<input
value="{{data.emp.name}}"
matInput
placeholder="name"
formControlName="name"
required
/>
</mat-form-field>
</div>
<div class="input-row">
<mat-form-field fxFlex>
<mat-label>Designation</mat-label>
<input
value="{{data.emp.designation}}"
matInput
placeholder="designation"
formControlName="designation"
required
/>
</mat-form-field>
</div>
<br />
<div class="">
<button
mat-raised-button
type="reset"
class="btn btn-danger width"
(click)="close()">
Close</button
>
<button
mat-raised-button
[disabled]="!f.valid"
right
class="btn btn-success width right"
type="submit">
Update
</button>
</div>
</form>
Employee.component.ts
editForm: FormGroup;
constructor(
public dialogRef: MatDialogRef<EmployeeComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private service: EmployeeService
) {}
ngOnInit() {
this.editForm = new FormGroup({
id: new FormControl({ disabled: true }, Validators.required),
name: new FormControl("", [
Validators.required,
Validators.pattern(
/^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
)
]),
designation: new FormControl("", [
Validators.required,
Validators.pattern(
/^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
)
])
});
}
onSubmit() {
console.log(this.editForm.value);
this.service.updateEmployee(this.editForm.value).subscribe(
data => {
this.dialogRef.close();
},
err => {
console.log(err);
}
);
}
close() {
this.dialogRef.close();
}
Even when working with template driven form, I'm facing the same problem.
解决方案
in app.module.ts
import {RxReactiveFormsModule } from "@rxweb/reactive-form-validators"
imports:[
....,
RxReactiveFormsModule
]
in app.component.ts
import { Component, OnInit } from '@angular/core';
import {FormGroup,FormControl,Validators } from "@angular/forms"
import {RxFormBuilder,FormGroupExtension } from "@rxweb/reactive-form-validators"
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Angular';
editForm:FormGroup;
constructor(private formBuilder:RxFormBuilder){}
ngOnInit(){
this.editForm = this.formBuilder.group({
id:[1, Validators.required],
name: ["Anil", [
Validators.required,
Validators.pattern(
/^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
)
]],
designation: ["Software Engg", [
Validators.required,
Validators.pattern(
/^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
)
]]
});
}
onSubmit() {
console.log(this.editForm.value)
let isDirty = (<FormGroupExtension>this.editForm).isDirty()
}
}
in app.component.html
<div class="container">
<main class="col-12">
<h3 class="bd-title" id="content">Dirty Check Example</h3>
<br/>
<form [formGroup]="editForm" (ngSubmit)="onSubmit()" >
<div class="form-group">
<label>Id</label>
<input type="text" formControlName="id" class="form-control" />
</div>
<div class="form-group">
<label>Name</label>
<input type="text" formControlName="name" class="form-control" />
</div>
<div class="form-group">
<label>Designation</label>
<input type="text" formControlName="designation" class="form-control" />
</div>
<button [disabled]="!(editForm.valid ||!editForm['isDirty']())" class="btn btn-primary">Update</button>
</form>
</main></div>
Here i created an example in stackblitz
Angular Update/Edit form- StackBlitz
这篇关于在表单字段-Angular-ReactiveForms 中至少更改一个值之前,使用验证更新表单不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!