title: Angular : DatePicker not required but still invalid
body: <p>I am trying to do a form in Angular with a datePicker that's not required</p>
  <pre><code>&lt;button mat-raised-button [disabled]=&quot;ruleForm.invalid&quot;
              (click)=&quot;addRule()&quot;&gt;
              &lt;span&gt;ADD&lt;/span&gt;
  &lt;/button&gt;
  &lt;form *ngIf=&quot;ruleForm&quot; name=&quot;ruleForm&quot; [formGroup]=&quot;ruleForm&quot; class=&quot;w-100-p&quot; fxLayout=&quot;column&quot;&gt;
      &lt;mat-form-field appearance=&quot;fill&quot; fxFlex=&quot;9&quot;&gt;
                          &lt;mat-label&gt;End Date&lt;/mat-label&gt;
                          &lt;input matInput [matDatepicker]=&quot;picker2&quot; name=&quot;endDate&quot; formControlName=&quot;endDate&quot;&gt;
                          &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker2&quot;&gt;&lt;/mat-datepicker-toggle&gt;
                          &lt;mat-datepicker #picker2&gt;&lt;/mat-datepicker&gt;
      &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  <p>But my field is still invalid when not giving a value : <a href="https://i.stack.imgur.com/aMiTA.png" rel="nofollow noreferrer">No value at first</a></p>
  <p>The only way to go around that is to give it a value then erase it :<a href="https://i.stack.imgur.com/23RlS.png" rel="nofollow noreferrer">Value erased</a></p>
  <p>How to do it?</p>
  <p>Edit:
  The problem with in the initialization of the form :</p>
  <pre><code>return this._formBuilder.group({
          endDate: [moment(this.rule.endDate, 'DD-MM-YYYY')],
      });
  </code></pre>
  <p>I don't know why but replacing it by</p>
  <pre><code>return this._formBuilder.group({
          endDate: [this.rule.endDate? moment(this.rule.startDate, 'DD-MM-YYYY'): ''],
      });
  </code></pre>
  <p>resolved my problem</p>