Я сделал форму, которая включает элемент управления, необходимый для даты, построенный с использованием библиотеки материалов. Мне бы не хотелось, чтобы при вводе вы могли вводить текст вручную, поэтому я отключаю его. Но это означает, что моя форма не может получить введенную дату.
Процесс основан на базовой настройке реактивной формы:
Форма шаблона
<form [formGroup]="newDetailLineForm">
<mat-form-field>
<input formControlName="expiryDate" matInput [matDatepicker]="picker" placeholder="Date Up" disabled>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker toggle>
<mat-datepicker disabled="false" #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
<div class="button-container">
<button mat-button (click)="onSaveForm()">
Save
<mat-icon>save</mat-icon>
</button>
</div>
</form>
Код формы здания
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Inserted } from 'src/models/inserted-model';
@Component({
selector: 'app-new-form-popup',
templateUrl: './new-form-popup.component.html',
styleUrls: ['./new-form-popup.component.scss']
})
export class NewFormPopupComponent implements OnInit {
public newDetailLineForm: FormGroup;
ngOnInit() {
this.newDetailLineForm = new FormGroup({
//--> undefined
expiryDate: new FormControl({ value: '', disabled: true }),
//--> correct
//expiryDate: new FormControl('')
});
}
}
Кнопка отправки
onSaveForm() {
let dataObject: Inserted; // model
dataObject = {
Metadata: {
Properties: {
Expiry_Date: this.newDetailLineForm.value.expiryDate,
}
}
};
}
Вставленная модель
export interface Inserted {
Metadata: {
Properties: {
Expiry_Date:string;
}
}
}