Только сможете выбрать дату в Datepicker - PullRequest
Новая
       26

Только сможете выбрать дату в Datepicker

0 голосов
/ 10 ноября 2019

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

Процесс основан на базовой настройке реактивной формы:

  1. Форма шаблона 

    <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>

  2. Код формы здания

    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('')  
    });

  }
}

  3. Кнопка отправки 

    onSaveForm() {
  let dataObject: Inserted; // model

  dataObject = {
    Metadata: {
      Properties: {
        Expiry_Date: this.newDetailLineForm.value.expiryDate,
      }
    }
  };
}

    Вставленная модель 

    export interface Inserted {
  Metadata: {
    Properties: {
     Expiry_Date:string;
    }
  }
}
...