Angular - Ошибка синтаксического анализатора: не может иметь канал в выражении действия в столбце 21 в [form.loading_date |дата: 'дд / мм / гггг' = $ событие]

Question

Я использую Angular-7 для приложения веб-портала.У меня есть средство выбора даты, из которого я хотел бы получить дату только без отметки времени.Также это должно быть в следующем формате: дд / мм / гггг.

my.component.ts

import { Component, OnInit, ElementRef, NgZone, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../../shared/services/api.service';
import { TokenService } from '../../shared/services/token.service';
import { Router } from '@angular/router';
import { SnotifyService } from 'ng-snotify';
import swal from 'sweetalert2';
import { FormControl } from '@angular/forms';


@Component({
  selector: 'app-client-quotes-landing',
  templateUrl: './client-quotes-landing.component.html',
  styleUrls: ['./client-quotes-landing.component.scss']
})
export class ClientQuotesLandingComponent implements OnInit {

  public form = {
    first_name : null,
    last_name : null,
    email : null,
    phone : null,
    address : null,
    business_name : null,
    truck_required : null,
    truck_type : null,
    quote_origin : null,
    quote_destination : null,
    commodity : null,
    loading_date : null,
    comment : null,
  };

  public error = {
    'first_name' : null,
    'last_name' : null,
    'email' : null,
    'phone' : null,
    'address' : null,
    'business_name' : null,
    'truck_required' : null,
    'truck_type' : null,
    'quote_origin' : null,
    'quote_destination' : null,
    'commodity' : null,
    'loading_date' : null,
    'comment' : null
  };

  constructor(
    private api: ApiService,
    private token: TokenService,
    private router: Router,
    private notify: SnotifyService,
    ) {
     }     

  ngOnInit() {
    window.dispatchEvent(new Event('load'));
    window.dispatchEvent(new Event('resize'));
  }

  onSubmit(){
    this.notify.clear();
    var header = {
      'Content-Type': 'application/json'
    }
    return this.api.post('clientquotelanding', this.form, header).subscribe(
      error => this.errorHandle(error),
    );
  }

  tokenHandler(data){
    this.notify.clear();
    console.log(data);
  }

  errorHandle(error){
    this.notify.clear();
    console.log(error);
    this.error = error.error.errors;
  }

}

my.component.html

<div class="col-xs-6">
  <label for="loading_date">Loading Date<span style="color:red;"> *</span></label>
  <div class="input-group date" style="width: 100%;" >
   <mat-form-field>
     <input matInput [matDatepicker] = "picker" placeholder = "Choose a date" name="loading_date" [(ngModel)]="form.loading_date | date: 'dd/MM/yyyy'" #loading_date="ngModel" [ngClass]="{'is-invalid' : loading_date.invalid && ((loading_date.dirty || loading_date.touched) || clientquoteForm.submitted)}"   required>
     <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
     <div class="form-feedback" *ngIf="loading_date.invalid && ((loading_date.dirty || loading_date.touched) || clientquoteForm.submitted)">
      <div style="color:red;" *ngIf="loading_date.errors?.required"class="alert alert-danger">Loading Date is required.</div>
      </div>
  </div>
</div>

В моем.component.html, я попытался использовать встроенный канал для решения проблемы с датой.

Когда я обслуживал приложение, я получил эту ошибку на консоли:

Как мне решить?

Answer 1

Пожалуйста, используйте [ngModel] = "form.loading_date | date: 'dd / MM / yyyy'" (ngModelChange) = "form.loading_date = $ event"

Вместо двусторонней привязки, как показано ниже[(ngModel)] = "form.loading_date | дата: 'дд / мм / гггг'"

Answer 2

Трубы предназначены только для логики дисплея и поэтому не могут использоваться в ситуациях, подобных ngModel.Выполните логику в вашем файле TypeScript, чтобы получить нужный вам формат.