Update form with Validation not working until atleast one value is changed in the form field-Angular- ReactiveForms

Question

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.

score 0 · Accepted Answer · answered Dec 27 '18 at 11:03

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

Update form with Validation not working until atleast one value is changed in the form field-Angular- ReactiveForms

1 Answers1

Linked