Ввод / изменение углового материала Datepicker не обновляет значение элемента управления реактивной формы - PullRequest
Новая
       21

Ввод / изменение углового материала Datepicker не обновляет значение элемента управления реактивной формы

0 голосов
/ 23 ноября 2018

Я пытаюсь использовать средства выбора даты в реактивной форме, и у меня возникают проблемы из-за того, что изменение значения входа, подключенного к датчику, не обновляет значение элемента управления формы.

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

component.html 

<form [formGroup]="invoiceForm">

  <mat-form-field appearance="outline" floatLabel="always">

    <mat-label>Date</mat-label>

    <input matInput formControlName="date" [matDatepicker]="selectDate" placeholder="DD/MM/YYYY">

    <mat-datepicker-toggle matSuffix [for]="selectDate"></mat-datepicker-toggle>

    <mat-datepicker #selectDate></mat-datepicker>

    <mat-error *ngIf="form.date.errors.required">Date is required</mat-error>

    <mat-error *ngIf="form.date.errors.validDate">Invalid date</mat-error>

  </mat-form-field>


  <button mat-raised-button (click)="saveInvoice()" [disabled]="!invoiceForm.valid || !items.length">Save</button>

</form>

component.ts 

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable, from } from 'rxjs';
import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatDialogRef, MatDatepickerInputEvent } from '@angular/material';
import * as moment from 'moment';

import { DataService } from '@app/services/data/data.service';
import { ContactsService } from '@app/services/contacts/contacts.service';

// import { NewContactDialogComponent } from './dialogs/new-contact-dialog/new-contact-dialog.component';
import { NewItemDialogComponent } from '@app/invoices/dialogs/new-item-dialog/new-item-dialog.component';

import Invoice from '@app/interfaces/invoice.interface';
import InvoiceItem from '@app/interfaces/invoiceItem.interface';

import ValidateDate from '@app/validators/date.validator';

@Component({
  selector: 'app-new-invoice',
  templateUrl: './new-invoice.component.html',
  styleUrls: ['./new-invoice.component.scss']
})

export class NewInvoiceComponent implements OnInit {

  invoice: Invoice;
  invoiceForm: FormGroup;
  items: InvoiceItem[];

  constructor(public data: DataService, public contactsService: ContactsService, private formBuilder: FormBuilder, private dialog: MatDialog) {
    this.items = [];

    this.invoiceForm = this.formBuilder.group({
        id: ['', Validators.required],
        reference: ['', Validators.required],
        contactId: ['', Validators.required],
        date: [
            '',
            [
                Validators.required,
                ValidateDate
            ]
        ],
        saleDate: [
            '',
            Validators.required,
            ValidateDate
        ],
        dueDate: [
            '',
            Validators.required,
            ValidateDate
        ]
    })
}

1 Ответ

0 голосов
/ 23 ноября 2018

Попробуйте с помощью 

<input matInput [formControl]="date" [matDatepicker]="selectDate" placeholder="DD/MM/YYYY">
...