从 FormControl 中的 mat-datepicker 中获取值

问题描述

我正在向 API 创建 POST 请求，其中一个引发错误的字段是 mat-datepicker 字段，因为它位于 ngOnInit() 内调用(我猜还没有选择任何东西).name、email 等字段表现良好，但我无法从 datepicker 字段中获取值...我如何也发送该值提交表单时?

我的尝试是这样的:

ngOnInit() {this.myForm = new FormGroup({date_of_birth: new FormControl(new Date().toISOString(), [Validators.required,this.backendValidation.bind(this, 'date_of_birth')])})}<mat-form-field><mat-label>日期</mat-label><input matInput [matDatepicker]="date_of_birth" formControlName="date_of_birth"/><mat-datepicker-toggle matSuffix [for]="date_of_birth"></mat-datepicker-toggle><mat-datepicker #date_of_birth></mat-datepicker></mat-form-field>

解决方案

在 HTML 中:

<mat-form-field>日期<input matInput [matDatepicker]="picker" formControlName="date_of_birth"/><mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle><mat-datepicker #picker></mat-datepicker></mat-form-field></表单><button (click)="get()">get</button>

TS:

this.empForm = this.fb.group({date_of_birth: new FormControl(new Date(), [Validators.required])});

安慰:

get(){console.log(this.empForm.get('date_of_birth').value);}

希望对你有帮助.如果有任何问题，那么我认为您的自定义验证器存在问题 - this.backendValidation.bind(this, 'date_of_birth').

希望这有效！

I am creating a POST request to an API, and one of the fields which throws an error is a mat-datepicker field, since it's inside the ngOnInit() call(and nothing is yet selected, I guess). Fields such as name, email etc. behave well, but I'm having trouble getting a value out of the datepicker field... How could I send that value as well when submitting the form?

My attempt was this:

ngOnInit() {
  this.myForm = new FormGroup({
    date_of_birth: new FormControl(new Date().toISOString(), [
       Validators.required,
       this.backendValidation.bind(this, 'date_of_birth')
    ])
   })
  }


<mat-form-field>
  <mat-label>Date</mat-label>
  <input matInput [matDatepicker]="date_of_birth" formControlName="date_of_birth" />
  <mat-datepicker-toggle matSuffix [for]="date_of_birth"></mat-datepicker-toggle>
  <mat-datepicker #date_of_birth></mat-datepicker>
</mat-form-field>

解决方案

In HTML:

<form [formGroup]="empForm" (ngSubmit)="onSubmit()">
<mat-form-field>
    Date
    <input matInput [matDatepicker]="picker" formControlName="date_of_birth" />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</form>

<button (click)="get()">get</button>

TS:

this.empForm = this.fb.group({
  date_of_birth: new FormControl(new Date(), [
    Validators.required
  ])
});

To console:

get(){
 console.log(this.empForm.get('date_of_birth').value);
}

Hope this will help you. If any issues, then I think its problem with the custom validator you have - this.backendValidation.bind(this, 'date_of_birth').

Hope this works !

这篇关于从 FormControl 中的 mat-datepicker 中获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！