如何初始化 Angular Material Datepicker 输入表单字段? [英] How to initialize an Angular Material Datepicker input form field?

问题描述

我正在尝试格式化我的日期选择器.我不知道路.我尝试插入一个我不知道如何使用但从互联网上复制它的 moment.js 库.现在我的日期选择器返回一个对象时刻，我不知道如何格式化它.

组件

this.form = this.fb.group({DeliveryDate: [this.deliveryDate],//我尝试在这里设置 this.delieryDate null 或 moment() 或everythink .....地址:[null, [Validators.required, Validators.minLength(5)]],电话:[null, [Validators.minLength(9),Validators.maxLength(19)]],城市:[null，[Validators.required，Validators.minLength(5)]]，数据:this.fb.array([this.createContact()])});

模板

<input matInput [matDatepicker]="picker";placeholder =Izaberite datum narudzbe"；formControlName=deliveryDate"><mat-datepicker-toggle matSuffix [for]=picker"></mat-datepicker-toggle><mat-datepicker #picker></mat-datepicker></mat-form-field>

解决方案

为

I'm trying to format my date picker. I don't know the way. I tried inserting a moment.js library that I don't know how to use but copying it from the internet. Now my date picker returns an object moment and I don't know how to format this.

Component

this.form = this.fb.group({
  deliveryDate: [this.deliveryDate], // i try to set here instead this.delieryDate null or moment() or everythink.....
  address: [null, [Validators.required, Validators.minLength(5)]],
  phone: [null, [Validators.minLength(9),Validators.maxLength(19)]],
  city: [null, [Validators.required, Validators.minLength(5)]],
  data: this.fb.array([this.createContact()])
});

Template

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Izaberite datum narudzbe"
      formControlName="deliveryDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

解决方案

The simplest way to set the initial date for an Angular Material Datepicker is to set an initial date value when constructing the form control.

Component

import {Component} from '@angular/core';
import {FormBuilder, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  deliveryForm = this.fb.group({
    deliveryDate: [new Date()],
    address: [null, [Validators.required, Validators.minLength(5)]],
    phone: [null, [Validators.minLength(9),Validators.maxLength(19)]],
    city: [null, [Validators.required, Validators.minLength(5)]]
  });

  constructor(private fb: FormBuilder) { }
}

HTML Template

<form [formGroup]="deliveryForm">
  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Izaberite datum narudzbe"
         formControlName="deliveryDate">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <input matInput formControlName="address" placeholder="Address"
      autocomplete="address-line1">
  </mat-form-field>

  <mat-form-field>
    <input matInput formControlName="phone" placeholder="Phone number"
      autocomplete="tel-national">
  </mat-form-field>

  <mat-form-field>
    <input matInput formControlName="city" placeholder="City" autocomplete="address-level2">
  </mat-form-field>
</form>

Resulting Form

这篇关于如何初始化 Angular Material Datepicker 输入表单字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！