title: Angular 7 setting values of reactive form on component load enable save button even if the form isn't validated
body: <p>I have the following issue. <a href="https://stackblitz.com/edit/example-angular-material-reactive-form-3d19rq" rel="noreferrer">Click to check the stack blitz</a>.</p>
  
  <p>I am setting a reactive form in the constructor:</p>
  
  <pre><code>this.formGroup = this.fb.group({
        'family_name_en': new FormControl('', Validators.required),
        'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
        'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
  });
  </code></pre>
  
  <p>And in the <code>ngOnInti()</code> hook, I am getting the data related to the <code>unit_id</code>.</p>
  
  <p>As I am migrating data from platform to another, the family name in arabic was not recommended, but it is now. So most of the data will load without the arabic name.</p>
  
  <p>The issue is the button is always enabled, and what I need to do is if a user wants to update this <code>unit_id</code>, he should add the arabic name so the button is enabled then.</p>
  
  <p>If the form is valid, no harm enabling the button on load of the component.</p>
  
  <p>Here is the <code>getData()</code> method that get the data and set the form group controls values:</p>
  
  <pre><code>ngOnInit() {
      this.getDataById();
  }
  </code></pre>
  
  <p>getDataById():</p>
  
  <pre><code>getDataById() {
      this.showSpinner = true;
      this.auth.getDataById(this.unit_id).subscribe(
        (data) =&gt; {
          if (data['info'][0]['total'] == 1) {
            this.noDataBool = false;
            this.showSpinner = false;
            this.family_name_en = data['info'][0]['hh_last_name_en'];
            this.formGroup.controls['family_name_en'].setValue(this.family_name_en);
            this.family_name_ar = data['info'][0]['hh_last_name_ar'];
            this.formGroup.controls['family_name_ar'].setValue(this.family_name_ar);
            this.unit_id = data['info'][0]['unit_id'];
            this.formGroup.controls['unit_id '].setValue(this.unit_id);
      }
  }
  </code></pre>
  
  <p>The button:</p>
  
  <pre><code>&lt;button mat-raised-button color="warn" (click)="updateData()" [disabled]="!formGroup.valid"&gt;
      &lt;mat-icon&gt;update&lt;/mat-icon&gt;Update
  &lt;/button&gt;
  </code></pre>