在表单字段-Angular-ReactiveForms 中至少更改一个值之前，使用验证更新表单不起作用 [英] Update form with Validation not working until atleast one value is changed in the form field-Angular- ReactiveForms

查看：18
本文介绍了在表单字段-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-危险宽度"(点击)=关闭()">关闭更新

</表单>

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
      >&nbsp;&nbsp;
      <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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆