包含一个组件作为 FormControl Angular2 [英] Include a component as FormControl Angular2

问题描述

我有通过表单构建器构建表单的组件，现在在该表单中我需要包含一个只有一个输入框的组件作为表单控件.

添加.ts

this.newForm = this.fb.group({名称:['', [Validators.required]],姓氏:['', [Validators.required]],时间: ''});

时间"必须作为不同的组件包含在内.

add.html

<label class="col-md-3 control-label" for="name">{{'forms.newForm.label.configuration.name' |翻译}}</label><div class="col-md-3"><input type="text" formControlName="name" placeholder="placeholder"class="form-control input-md" type="text"><small *ngIf="!newForm.controls.name.valid && newForm.controls.name.dirty" class="text-danger">姓名为必填项.</小>
<label class="col-md-3 control-label" for="surname">{{'forms.newForm.label.configuration.name' |翻译}}</label><div class="col-md-3"><input type="text" formControlName="surname" placeholder="placeholder"class="form-control input-md" type="text"><small *ngIf="!newForm.controls.surname.valid && newForm.controls.name.dirty" class="text-danger">姓氏是必需的.</小>

时间.html

<div class="col-md-7"><input class="form-control input-md" type="text" (keydown)="eventHandler($event)" maxlength="11"><small *ngIf="!validTime" class="text-danger">无效时间</小>

如何将表单控件时间"作为一个组件包含在主表单中，以便我可以通过 this.newForm.controls['time'].value 访问该值??

解决方案

单个Form Control不能单独传递给子组件，必须在formGroup内传递代码>.所以在你的表单中添加一个组(这里命名为 timeGroup):

this.newForm = this.fb.group({名称:['', [Validators.required]],姓氏:['', [Validators.required]],时间组:this.fb.group({时间: ''})});

在您的父 html 中将 formGroup 传递给您的孩子:

<time-comp [timeGroup]="newForm.controls.timeGroup"></time-comp>

和子模板:

<input formControlName="time">

并且不要忘记用 Input 标记从父级收到的表单组:

@Input() timeGroup: FormGroup;

然后您可以通过以下方式访问 time 值(在您的父级中):

this.newForm.get('timeGroup').get('time').value;

另请注意，您不需要任何事件，例如 keyup，如果没有它们，更改将被父级捕获.

样本Plunker

I have component that has form built through form builder and now in that form i need to include a component that has only one input box as a form control.

add.ts

this.newForm = this.fb.group({
      name: ['', [Validators.required]],
      surname:['', [Validators.required]],
      time: ''
    });

"time" has to be included as a different component.

add.html

<div class="form-group">
            <label class="col-md-3 control-label" for="name">{{'forms.newForm.label.configuration.name' | translate}}</label>  
            <div class="col-md-3">
              <input type="text" formControlName="name" placeholder="placeholder" 
                  class="form-control input-md" type="text">
              <small *ngIf="!newForm.controls.name.valid && newForm.controls.name.dirty" class="text-danger">
                Name is required.
              </small>
            </div>

            <label class="col-md-3 control-label" for="surname">{{'forms.newForm.label.configuration.name' | translate}}</label>  
            <div class="col-md-3">
              <input type="text" formControlName="surname" placeholder="placeholder" 
                  class="form-control input-md" type="text">
              <small *ngIf="!newForm.controls.surname.valid && newForm.controls.name.dirty" class="text-danger">
                Surname is required.
              </small>
            </div>
          </div>

time.html

<div>
  <div class="col-md-7">
    <input class="form-control input-md" type="text" (keydown)="eventHandler($event)" maxlength="11">
    <small *ngIf="!validTime" class="text-danger">
      Invalid time
    </small>
  </div>
</div>

How to i include form control "time" as a component in the main form so i can access the value through this.newForm.controls['time'].value??

解决方案

A single Form Control cannot be passed separately to the child component, it has to be passed within a formGroup. So add a group (here named timeGroup) to your form:

this.newForm = this.fb.group({
      name: ['', [Validators.required]],
      surname:['', [Validators.required]],
      timeGroup: this.fb.group({
        time: ''
      })
});

In your parent html pass the formGroup to your child:

<time-comp [timeGroup]="newForm.controls.timeGroup"></time-comp>

and child template:

<div [formGroup]="timeGroup">
  <input formControlName="time">
</div>

And do not forget to mark the formgroup received from parent with Input:

@Input() timeGroup: FormGroup;

Then you can access the time value (in your parent) with:

this.newForm.get('timeGroup').get('time').value;

Also notice that you do not need any events, like keyup, the changes will be catched by the parent without them.

Sample Plunker

这篇关于包含一个组件作为 FormControl Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！