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

问题描述

使用put/update方法时，该按钮将被禁用，直到触摸了每个字段并且每个字段中的值至少已更改.而post方法可以很好地工作.

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

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

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.

推荐答案

在app.module.ts中 从"@ rxweb/reactive-form-validators"导入{RxReactiveFormsModule}

in app.module.ts import {RxReactiveFormsModule } from "@rxweb/reactive-form-validators"

进口:[ ....， RxReactiveFormsModule ]

imports:[ ...., RxReactiveFormsModule ]

在app.component.ts

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()

  }
}

在app.component.html

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>

在这里我用stackblitz创建了一个例子

Here i created an example in stackblitz

角度更新/编辑表单-StackBlitz

这篇关于直到在表单字段"Angular-ReactiveForms"中更改了至少一个值后，使用“验证"更新表单才起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！