title: How To Apply Multiple MAT_DATE_FORMATS On Same Component
body: <p>I have a component that contains many date inputs. All of them, but one, will use the standard format (MM/DD/YYYY). I read <a href="https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats" rel="noreferrer">here</a>, which helped me figure out how to get the customFormat (MM/YYYY) I wanted, but now it shows on every date input because of the provider 'useValue' on the component level. Which lead me to this question I cannot find a proper answer for. How can I have multiple formats on the same component? </p>
  
  <p><strong>On the TypeScript:</strong></p>
  
  <pre><code>    export const COMMISSION_DATE_FORMATS = {
        parse: {
          dateInput: 'MM/YYYY',
        },
        display: {
          dateInput: 'MM/YYYY',
          monthYearLabel: 'MMM YYYY',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
        },
      };
  ...    
      providers: [
          { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
          { provide: MAT_DATE_FORMATS , useValue: COMMISSION_DATE_FORMATS },
        ]
  </code></pre>
  
  <p><strong>On the UI:</strong></p>
  
  <p>One requiring custom format (displays properly)</p>
  
  <pre><code>  &lt;mat-form-field&gt;
          &lt;input matInput [matDatepicker]="dSaleMonthPicker" placeholder="Commission Month &amp; Year" formControlName="dSaleMonth"&gt;
          &lt;mat-datepicker-toggle matSuffix [for]="dSaleMonthPicker"&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-datepicker #dSaleMonthPicker startView="multi-year" (yearSelected)="commissionDateYearHandler($event)" (monthSelected)="commissionDateMonthHandler($event, dSaleMonthPicker)"&gt;
          &lt;/mat-datepicker&gt;
       &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/RHNmM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RHNmM.png" alt="enter image description here"></a></p>
  
  <p>Others requiring standard format (but they are also displaying with custom format)</p>
  
  <pre><code>  &lt;mat-form-field&gt;
        &lt;input matInput formControlName="dSold" [matDatepicker]="dSoldPicker" placeholder="Sold Date" matTooltipPosition="below"&gt;
        &lt;mat-datepicker-toggle matSuffix [for]="dSoldPicker"&gt;&lt;/mat-datepicker-toggle&gt;
        &lt;mat-datepicker #dSoldPicker [startAt]="dSold"&gt;&lt;/mat-datepicker&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NBGBH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NBGBH.png" alt="enter image description here"></a></p>
  
  <p>I know with the formControlName I can't use typical "piping" from Angular, so how can I have multiple formats on the same component? Perhaps there is a way to add the custom format directly on the input? Any help is greatly appreciated. </p>