包含一个组件作为FormControl Angular2

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

add.ts

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

“时间”必须作为不同的组成部分包括在内

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>

{{'forms.newForm.label.configuration.name'| translate}}
名称是必需的。
{{'forms.newForm.label.configuration.name'| translate}}
姓是必需的。

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>

无效时间

---

如何将窗体控件“时间”作为一个组件包含在主窗体中，以便通过此.newForm.controls['time']访问值？？？

单个

窗体控件

不能单独传递给子组件，它必须在

窗体组

中传递。因此，在表单中添加一个组（此处名为

timeGroup

）：

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

在父html中，将

formGroup

传递给您的孩子：

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

然后，您可以通过以下方式访问

时间

值（在父项中）：

还请注意，您不需要任何事件，如

keyup

，更改将由父级捕获，而不需要它们

---

从Angular 8开始，可以将FormControl作为@Input传递给子组件，而无需将其放入formGroup中，并且它仍然可以使用双向绑定。例如

这是父母和孩子吗？@AJT_82是的。。是父母和孩子这个答案对你有帮助吗？：）伟大的然后，请考虑在这个投票的投票下点击灰色记号来接受答案，因此问题被标记为：“有一个伟大的日子和快乐的编码：

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

@Input() timeGroup: FormGroup;

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