Не удается получить значение даты ngForm из datepicker в angular

Я не могу получить значение от mat-datepicker. Там написано undefined. Я использовал ngForm и ngModel, но не знаю, где я ошибаюсь.

<form #f="ngForm" (ngSubmit)="registerClient(f.value)">
    <div class="" style="width: 50%; margin:auto;">
        <!-- ... Other fields -->
        <!-- ... -->

        <div class="form-group">
            <mat-form-field id="date">
                <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="date">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker id="datePicked" #picker></mat-datepicker>
            </mat-form-field>
        </div>
        <div>
        </div>
        <button class="btn btn-success mt-2">Add new client</button>
    </div>
</form>

client-form.ts

export class ClientFormComponent {
    date: Date;
    // ...
    // ...
    registerClient(crediantials) {
        let client: Client = {
            firstName: crediantials.firstName,
            lastName: crediantials.lastName,
            phone: crediantials.phone,
            doctorsName: this.selectedD.username,
            procedure: this.selectedP,
            registrationDate: this.date
        };

        console.log(client), 'client';
        console.log(crediantials)
        console.log(this.date, ' date);
        this.clientService.addClient(client);
    }
}

Это ошибки, которые я получаю в своей консоли.

ClientFormComponent.html: 41 ОШИБКА Ошибка: если ngModel используется в теге формы, должен быть установлен либо атрибут имени, либо элемент управления формы должен быть определен как «автономный» в ngModelOptions.

Пример 1: <input [(ngModel)]="person.firstName" name="first">

Пример 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

КОНТЕКСТ ОШИБКИ DebugContext_ {view: {…}, nodeIndex: 69, nodeDef: {…}, elDef: {…}, elView: {…}}

ОШИБКА Ошибка: ViewDestroyedError: попытка использовать уничтоженное представление: detectChanges

Это строка, в которой возникает ошибка.

<input matInput [matDatepicker]="picker" placeholder="Choose a date"  [(ngModel)]="date">

person Dignity Dignity    schedule 23.09.2019    source источник
comment
Не могли бы вы сделать фрагмент кода на stackblitz.com?   -  person Nagarjuna Reddy    schedule 23.09.2019
comment
вы можете сделать это в stackblitz?   -  person Pavan Nagadiya    schedule 23.09.2019
comment
Я добавил строки ошибок. Слишком много зависимостей, что я должен добавить, чтобы stackblitz работал   -  person Dignity Dignity    schedule 23.09.2019
comment
‹Input matInput [matDatepicker] = picker name = date placeholder = Выберите дату [(ngModel)] = date› разрешит это   -  person Dhaval Patel    schedule 23.09.2019


Ответы (1)


Если используется ngForm, поля ввода с ngModal должны иметь имя атрибута со значением.

<input matInput [matDatepicker]="picker" name="date" placeholder="Choose a date" [(ngModel)]="date">
person Dhaval Patel    schedule 23.09.2019