title: Angular 4 : disable button as long as form not validated
body: <p>I have a form with required fields and 2 buttons : first button submits the form and another button is to download the file. </p>
  
  <p>On the one hand, as long as form is not valid, the submit button is disabled (and it enables when the form is valid) :</p>
  
  <p><strong>component.html</strong> :</p>
  
  <p><code>&lt;button type="submit" [disabled]="!formGroupTest.valid" &gt;Valider&lt;/button&gt;</code></p>
  
  <p>=> It works</p>
  
  <p>On the other hand, as long as form is not valid, the "download" button is disabled and it enables when : form valid AND button submit is clicked :</p>
  
  <p><strong>component.html</strong> :</p>
  
  <p><code>&lt;button [disabled]="!formGroupTest.valid || !buttonSubmitEnabled"&gt;Download&lt;/button&gt;</code></p>
  
  <p>For that, in <strong>component.ts</strong>, i initialize a boolean at false, and it becomes true when button submit clicked (method sendForm())  :</p>
  
  <pre><code>private buttonSubmitEnabled: boolean = false; 
  
  sendForm() {
      this.buttonSubmitEnabled=true;
  }
  </code></pre>
  
  <p>When I fill the form for the first time, it works perfectly => I click on the submit button and the download button becomes enable. However, after the first time, if I decide to change required fields and it returns the form as invalid, the 2 buttons are disabled (logically), but when I fill the fields correctly then the "download" button becomes enable. I understood the problem, because the 2 conditions to enable the button download are respected : Form valid AND button submit clicked once.</p>
  
  <p>So, what if I want it to work every time, I think it's necessary to put the Boolean "buttonSubmitEnabled" at false each time the form is invalid, but I don't know how to do it.</p>