Question

我制作了一个表格，其中包含用材料库构建的日期所需的控件。我不希望在您的输入中可以手动输入文本，因此我将其禁用。但这意味着我的表单无法获取输入的日期。

该过程基于反应形式的基本设置：

模板表格

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

仅能在Datepicker中选择日期

0 个答案: