包含一个组件作为 FormControl Angular2

Posted 2023-02-23

【中文标题】包含一个组件作为 FormControl Angular2

【英文标题】：Include a component as FormControl Angular2

【发布时间】：2017-07-09 10:31:52

【问题描述】：

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

添加.ts

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

“时间”必须作为不同的组件包含在内。

添加.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>

时间.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>

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

【问题讨论】：

这是父母和孩子吗？

@AJT_82 是的.. 是父子关系

【参考方案1】：

单个FormControl 不能以这种方式单独传递给子组件，您需要将其与[formControl] 绑定才能做到这一点，创建自定义表单控件或在表单组中将其传递给子组件.在这里，将控件与子控件中的[formControl] 绑定是最简单的：

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

在您的父 html 中将 time 表单控件传递给您的孩子：

<time-comp [time]="newForm.get('time')"></time-comp>

和子模板：

<input [formControl]="time">

并且不要忘记用Input标记从父级收到的表单控件：

@Input() time: FormControl;

然后您可以通过以下方式访问time 值（在您的父级中）：

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

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

【参考方案2】：

从 Angular 8 开始，可以将 FormControl 作为 @Input 传递给子组件，而不必将其放在 formGroup 中，并且它仍然可以使用双向绑定。一个例子..https://angular-v2yaaw.stackblitz.io

【讨论】：

请提供源代码链接而不是输出链接。