title: Angular, Disable submit button using [disabled] to check form validity
body: <p>I'm trying to disable a submit button using <code>[disable]=form.controls[...].invalid</code> condition checking. The submit button should be disabled if there is an input fields is empty or <code>invalid</code>. But looks like i'm doing it wrong. The button is disabled when i fill some fields and left some fields empty, except for the first input field . When i filled the first input field, the button become enabled (while the other input fields are still empty or <code>invalid</code>).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//component.ts
  form01: FormGroup;
  public myDatePickerOptions: IMyDpOptions = {
    dateFormat: 'dd-mmm-yyyy',
  };
  
  setDate(): void {
    let date = new Date();
    this.form01.patchValue({
      DoB: {
        date: {
          year: date.getFullYear(),
          month: date.getMonth() + 1,
          day: date.getDate()
        }
      }
    });
  }
  
  clearDate(): void {
    this.form01.patchValue({
      DoB: null
    });
  }
  
  constructor(public builder: FormBuilder) {
    this.form01 = this.builder.group({
      email: [null, Validators.required], //text
      DoB: [null, Validators.required], //radio button
      gender: [null, Validators.required], //date picker
    });
  }
  
  results: object = new Object();
  functionForm01() {
    this.results = [{
      {
        "email": this.form01.controls.email.value
      },
      {
        "DoB": this.form01.controls.DoB.value
      },
      {
        "gender": this.form01.controls.gender.value
      }
    }]
    console.log(this.result);
  
    this.form01.reset();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--component.html--&gt;
  &lt;div&gt;
    &lt;form [formGroup]="form01"&gt;
      email:&lt;input type="text" name="email" formControlName="email" required/&gt; gender:
      &lt;input type="radio" name="gender" formControlName="gender" value="male"&gt; male&lt;br&gt;
      &lt;input type="radio" name="gender" formControlName="gender" value="female"&gt; female&lt;br&gt; DoB:
      &lt;my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required&gt;&lt;/my-date-picker&gt;
  
      &lt;button type="submit" [disabled]="form01.controls['email' || 'DoB' || 'gender'].invalid" (click)="functionForm01()"&gt;Click&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using Angular typescript and <code>myDatePicker</code> package from <a href="https://github.com/kekeh/mydatepicker" rel="noreferrer">this link</a>. Can anyone help me please?</p>