Angular 角度7，反应式表单，如何将日期格式化为'；YYYY-MM-DD'；？

我需要将post数据发送到API服务器。我有一个表单，它有一个日期选择器字段。现在，如果我将数据发送到服务器，它将发送格式为服务器拒绝的日期

以下是发送的整个数据的表示：

{
  address: "Address",
  department: 1,
  dob: "1997-08-19T18:00:00.000Z",
  email: "chitholian@gmail.com",
  gender: "male",
  hall: 1,
  id: 16701016,
  name: "Atikur Rahman Chitholian",
  phone: "No phone number",
  religion: "islam",
  semester: 1,
  session: "2015 - 2016"
}

以下是组件的代码：

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Department, Hall, Semester, Student} from '../custom/interfaces';
import {DepartmentService} from '../services/department.service';
import {MatSnackBar} from '@angular/material';
import {StudentService} from '../services/student.service';
import {Router} from '@angular/router';
import {DatePipe} from '@angular/common';

@Component({
  selector: 'app-student-reg',
  template: `
    <form class="panel" [formGroup]="form" (ngSubmit)="submit()">
      <mat-toolbar color="primary">Student Registration</mat-toolbar>
      <div class="panel-content of-hidden">
        <div class="col-1-2">
          <mat-form-field>
            <input matInput required type="number" placeholder="Student ID" [formControl]="id" name="id">
            <mat-error *ngIf="id.invalid">A valid Student ID is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput required placeholder="Full Name" [formControl]="name" name="name">
            <mat-error *ngIf="name.invalid">A valid Name is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [formControl]="gender" required placeholder="Gender">
              <mat-option *ngFor="let s of genders" [value]="s">{{s|titlecase}}</mat-option>
            </mat-select>
            <mat-error *ngIf="gender.invalid">Gender is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [formControl]="department" required placeholder="Department" (selectionChange)="onDeptChange()">
              <mat-option *ngFor="let d of departments" [value]="d.id">{{d.name}}</mat-option>
            </mat-select>
            <mat-error *ngIf="department.invalid">A department is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [disabled]="loading > 0 || department.invalid" [formControl]="semester" required placeholder="Semester">
              <mat-option *ngFor="let s of semesters" [value]="s.id">Semester {{s.number}}, Year {{s.year}}</mat-option>
            </mat-select>
            <mat-error *ngIf="semester.invalid">A semester is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [disabled]="loading > 0 || department.invalid || gender.invalid" [formControl]="hall" required placeholder="Hall">
              <ng-container *ngFor="let s of halls">
                <mat-option *ngIf="s.gender == gender.value" [value]="s.id">{{s.name}}</mat-option>
              </ng-container>
            </mat-select>
            <mat-error *ngIf="hall.invalid">Hall is required</mat-error>
          </mat-form-field>
        </div>
        <div class="col-1-2">
          <mat-form-field>
            <mat-select [formControl]="religion" required placeholder="Religion">
              <mat-option *ngFor="let s of religions" [value]="s">{{s|titlecase}}</mat-option>
            </mat-select>
            <mat-error *ngIf="religion.invalid">Religion is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [formControl]="session" required placeholder="Session">
              <mat-option *ngFor="let s of sessions" [value]="s">{{s}}</mat-option>
            </mat-select>
            <mat-error *ngIf="session.invalid">Session is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input type="email" [formControl]="email" required matInput placeholder="Email" name="email">
            <mat-error *ngIf="email.invalid">A valid email address is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input [formControl]="phone" maxlength="20" required matInput placeholder="Phone" name="phone">
            <mat-error *ngIf="phone.invalid">A valid phone number is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput required [formControl]="dob" placeholder="Date of birth" [matDatepicker]="picker"
                   name="dob">
            <mat-datepicker-toggle #toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
            <mat-error *ngIf="dob.invalid">A valid date of birth is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <textarea matInput required cols="2" placeholder="Address" name="address" [formControl]="address"></textarea>
            <mat-error *ngIf="address.invalid">Address is required</mat-error>
          </mat-form-field>
        </div>
        <button mat-flat-button type="button" routerLink="/login/student">I have already registered</button>
        <button mat-raised-button type="submit" color="primary" class="float-right" [disabled]="loading > 0 || form.invalid">SUBMIT
        </button>
      </div>
    </form>
    {{form.value|json}}
  `,
  styles: []
})
export class StudentRegComponent implements OnInit {
  form: FormGroup;

  loading = 0;

  departments: Department[] = [];
  semesters: Semester[] = [];
  religions = ['islam', 'hinduism', 'christianity', 'buddhism', 'other'];
  genders = ['male', 'female', 'other'];
  sessions = [];
  halls: Hall[] = [];

  get id() {
    return this.form.get('id');
  }

  get semester() {
    return this.form.get('semester');
  }

  get department() {
    return this.form.get('department');
  }

  get hall() {
    return this.form.get('hall');
  }

  get name() {
    return this.form.get('name');
  }


  get gender() {
    return this.form.get('gender');
  }


  get session() {
    return this.form.get('session');
  }


  get phone() {
    return this.form.get('phone');
  }


  get email() {
    return this.form.get('email');
  }


  get address() {
    return this.form.get('address');
  }


  get dob() {
    return this.form.get('dob');
  }

  get religion() {
    return this.form.get('religion');
  }


  constructor(private fb: FormBuilder, private ds: DepartmentService, private router: Router, private ss: StudentService) {
    this.form = fb.group({
      id: fb.control('', Validators.pattern(/^[1-9]\d{7}$/)),
      name: fb.control('', Validators.required),
      department: fb.control('', Validators.required),
      hall: fb.control('', Validators.required),
      semester: fb.control('', Validators.required),
      gender: fb.control('', Validators.required),
      session: fb.control('', Validators.required),
      dob: fb.control('', Validators.required),
      religion: fb.control('', Validators.required),
      phone: fb.control('', Validators.required),
      email: fb.control('', [Validators.required, Validators.email]),
      address: fb.control('', Validators.required),
    });
  }


  ngOnInit() {
    this.loading++;
    this.loadDepartments();
    this.generateSessions();
  }

  submit() {
    this.loading++;
    this.ss.register(this.form.value).subscribe(
      res => {
        this.loading--;
        this.router.navigate(['/login/student/']);
      }, error1 => {
        console.log(error1);
        this.loading--;
      });
  }

  loadSemesters() {
    this.ds.getSemesters(this.department.value).subscribe(
      data => {
        this.semesters = data;
        this.loading--;
      }, error => {
        this.loading--;
      });
  }

  loadDepartments() {
    this.ds.getAllDepartments().subscribe(
      data => {
        this.departments = data;
        this.loading--;
      }, error => {
        this.loading--;
      });
  }

  loadHalls() {
    this.ds.getHalls(this.department.value).subscribe(
      data => {
        this.halls = data;
        this.loading--;
      }, error => {
        this.loading--;
      });
  }

  generateSessions() {
    for (let i = (new Date()).getFullYear(); i > 1966; i--) {
      this.sessions.push((i - 1) + ' - ' + i);
    }
  }

  onDeptChange() {
    this.loading += 2;
    this.loadSemesters();
    this.loadHalls();
  }
}

从'@angular/core'导入{Component，OnInit}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
从“../custom/interfaces”导入{系、厅、学期、学生}；
从“../services/department.service”导入{DepartmentService}；
从“@angular/material”导入{matsnakbar}；
从“../services/student.service”导入{StudentService}；
从'@angular/Router'导入{Router}；
从“@angular/common”导入{DatePipe}；
@组成部分({
选择器：“应用程序学生注册”，
模板：`
学生注册
需要有效的学生ID
需要一个有效的名称
{{s|titlecase}}
性别是必需的
{{d.name}
需要一个部门
学期{s.number}，学年{s.Year}
需要一个学期
{{s.name}}
大厅是必需的
{{s|titlecase}}
宗教是必需的
{{s}
会议是必需的
需要有效的电子邮件地址
需要一个有效的电话号码
必须提供有效的出生日期
地址是必需的
我已经注册了
提交
{{form.value | json}}
`,
样式：[]
})
导出类StudentRegComponent在init上实现{
表格：表格组；
加载=0；
部门：部门[]=[]；
学期：学期[]=[]；
宗教=[‘伊斯兰教’、‘印度教’、‘基督教’、‘佛教’、‘其他’]；
性别=[‘男性’、‘女性’、‘其他’]；
会话=[]；
大厅：大厅[]=[]；
获取id（）{
返回此.form.get（'id'）；
}
获取学期（）{
返回此.form.get（'学期'）；
}
获取部门（）{
返回此.form.get（'department'）；
}
获得大厅（）{
返回此.form.get（'hall'）；
}
获取名称（）{
返回此.form.get（'name'）；
}
获取性别（）{
返回此.form.get（'gender'）；
}
获取会话（）{
返回此.form.get（'session'）；
}
获取电话（）{
返回此.form.get（'phone'）；
}
获取电子邮件（）{
返回此.form.get（'email'）；
}
获取地址（）{
返回此.form.get（'address'）；
}
得到dob（）{
返回此.form.get（'dob'）；
}
得到宗教{
返回此.form.get（'religation'）；
}
构造函数（专用fb:FormBuilder，专用ds:DepartmentService，专用路由器：router，专用ss:StudentService）{
this.form=fb.group({
id:fb.control（“”，Validators.pattern（/^[1-9]\d{7}$/），
名称：fb.控制（“”，需要验证器），
部门：fb.控制（''，需要验证器），
大厅：fb.控制（''，需要验证器），
学期：fb.控制（''，需要验证器），
性别：fb.控制（''，需要验证器），
会话：fb.控制（''，需要验证器），
dob:fb.控制（''，需要验证器），
宗教信仰：fb.控制（''，需要验证器），
电话：fb.控制（''，需要验证器），
电子邮件：fb.control（“”，[Validators.required，Validators.email]），
地址：fb.控制（''，需要验证器），
});
}
恩戈尼尼特（）{
这个是.loading++；
这是loadDepartments（）；
这个。generateSessions（）；
}
提交（）{
这个是.loading++；
this.ss.register（this.form.value）.subscribe(
res=>{
这是“加载”-；
this.router.navigate（['/login/student/']）；
}，error1=>{
控制台日志（错误1）；
这是“加载”-；
});
}
学期{
this.ds.getSemests（this.department.value）.订阅(
数据=>{
本学期=数据；
这是“加载”-；
}，错误=>{
这是“加载”-；
});
}
部门(){
此文件为.ds.getAllDepartments（）.subscribe(
数据=>{
此参数=数据；
这是“加载”-；
}，错误=>{
这是“加载”-；
});
}
装货大厅（）{
this.ds.getHalls（this.department.value）。订阅(
数据=>{
此参数=数据；
这是“加载”-；
}，错误=>{
这是“加载”-；
});
}
生成会话（）{
对于（设i=（新日期（））.getFullYear（）；i>1966；i--）{
this.sessions.push（（i-1）+'-'+i）；
}
}
onDeptChange（）{
这意味着加载+=2；
这是一个学期（）；
这是loadHalls（）；
}
}

---

要求

出生日期

即

dob

格式为

YYYY-MM-DD

。如何实现这一点？

您可以获得有关日期管道选项和配置的所有信息

---

您应该配置datepipe以获得如下内容

{{value_expression}date:'yyyyy/MM/dd'}

您可以使用Angular的日期管道实现这一点

还提供了一个供参考

是的，但是看看我的submit（）方法，我刚刚提交了

this.form.value

作为JSON负载，它将日期发送为

dob:“1997-08-19T18:00:00.000Z”

，但我需要将其转换为

dob:“1997-08-20”

。我不能这样做。正在尝试分配fo

@Component({
  ...,
  providers: [ DatePipe ]     // Add DatePipe from @angular/common
})
export class SampleComponent  {

   constructor(...,
               private datePipe: DatePipe) {}

   submit() {
     ...
     const body = this.form.value;
     body.dob   = this.datePipe.transform(body.dob, 'yyyy-MM-dd');  // You can provide any date format on the 2nd parameter

     this.ss.register(body).subscribe(res => {...});
}