title: Update form with Validation not working until atleast one value is changed in the form field-Angular- ReactiveForms
body: <p>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.</p>
  
  <p>Employee.component.html</p>
  
  <pre><code> &lt;form
      fxLayout="column"
      [formGroup]="editForm"
      #f="ngForm" (ngSubmit)="onSubmit()"
    &gt;
    &lt;div class="input-row"&gt;
        &lt;mat-form-field fxFlex&gt;
          &lt;mat-label&gt;Id&lt;/mat-label&gt;
          &lt;input readonly 
          value="{{data.emp.id}}"
            matInput #id disabled
            formControlName="id"
            required
          /&gt;
        &lt;/mat-form-field&gt;
      &lt;/div&gt;
      &lt;div class="input-row"&gt;
        &lt;mat-form-field fxFlex&gt;
          &lt;mat-label&gt;Name&lt;/mat-label&gt;
          &lt;input 
          value="{{data.emp.name}}"
            matInput 
            placeholder="name"
            formControlName="name"
            required
          /&gt;
        &lt;/mat-form-field&gt;
      &lt;/div&gt;
  
      &lt;div class="input-row"&gt;
        &lt;mat-form-field fxFlex&gt;
          &lt;mat-label&gt;Designation&lt;/mat-label&gt;
          &lt;input
          value="{{data.emp.designation}}"
            matInput
            placeholder="designation"
            formControlName="designation"
            required
          /&gt;
        &lt;/mat-form-field&gt;
      &lt;/div&gt;
  
      &lt;br /&gt;
      &lt;div class=""&gt;
        &lt;button
          mat-raised-button
          type="reset"
          class="btn btn-danger width"
          (click)="close()"&gt;
          Close&lt;/button
        &gt;&amp;nbsp;&amp;nbsp;
        &lt;button
          mat-raised-button
          [disabled]="!f.valid"
          right
          class="btn btn-success width right"
          type="submit"&gt;
          Update
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Employee.component.ts</p>
  
  <pre><code> editForm: FormGroup;
  
  constructor(
      public dialogRef: MatDialogRef&lt;EmployeeComponent&gt;,
      @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 =&gt; {
          this.dialogRef.close();
        },
        err =&gt; {
          console.log(err);
        }
      );
    }
    close() {
      this.dialogRef.close();
    }
  </code></pre>
  
  <p>Even when working with template driven form, I'm facing the same problem.</p>