首页 > 解决方案 > 角度2反应形式无需触摸即可获取输入值

问题描述

我正在使用angular 5反应形式。问题是当我按值填充输入时,抛出日期选择器反应表单没有在“表单控件名称”中作为流获得值。

截屏 页面截图

这是我的 HTML:

<div class="col-sm-2  mb-2">
                  <label >From</label>
                  <input type="text"  id="fromDate" class="form-control "  placeholder="From Date" formControlName="fromDate" 
                  [ngClass]="{'is-invalid':ifHasError('fromDate')}" >
                  <div class="invalid-tooltip">
                      <span *ngIf="ifRequired('fromDate')">
                              {{ifRequired('fromDate')}}
                              </span>
                </div> 
             </div>

标签: angulartypescriptangular-reactive-forms

解决方案


没有表单组添加到您的容器中。为了使 formControlName 起作用,父元素必须具有 [fromGroup]="myForm" 并且在您的组件中,您需要像这样定义 myForm:

myForm: FromGroup();
constructor(
  private fb: FormBuilder
){
  this.myForm = fb.group({
     fromDate: ["", Validators.required]
  })
}

在您的模板中

<div [formGroup]="myForm">
  <input formControlName="fromDate" placeholder="From Date" type="date" />
</div>

推荐阅读