title: How to validate angular form, having material form field?
body: <p>I have a form which uses Angular material form fields. I want to disable the submit button, till all the form controls are filled with appropriate value. (code is given as links in the description)</p>
  
  <p>When i am using <a href="https://i.imgur.com/hiETTZ0.png" rel="nofollow noreferrer">material components in template(code)</a>, and <a href="https://i.imgur.com/oJjrt61.png" rel="nofollow noreferrer">define controls(code)</a> in components, this is the output.
  <a href="https://i.stack.imgur.com/fmKpw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fmKpw.png" alt="ok"></a></p>
  
  <h3>Problem</h3>
  
  <p>When I implement formsBuilder or forms group in <a href="https://i.imgur.com/ZcQpAm6.png" rel="nofollow noreferrer">template</a> and in <a href="https://i.imgur.com/ylYsXDG.png" rel="nofollow noreferrer">component</a>, the material components won't display properly.</p>
  
  <p><a href="https://i.stack.imgur.com/C6Xxz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C6Xxz.png" alt="enter image description here"></a></p>
  
  <h3>Question</h3>
  
  <p>How can I disable/enable submit button only if all the <strong>material forms fiields are evaluated to true</strong></p>
  
  <p>Thanks in advance.</p>