Question

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

add.ts

from igraph import *
g = Graph([(0,1), (0,2), (2,3), (3,4), (4,2), (2,5), (5,0), (6,3), (5,6)])
g.vs["name"] = ["Alice", "Bob", "Claire", "Dennis", "Esther", "Frank", "George"]
#You could create Vertexes like g.add_vertex(name="Bill") 
path=g.get_shortest_paths("Alice",to="Frank",mode=OUT,output='vpath')
for n in path[0]:
    print("{}".format(g.vs[n]['name']))

＆＃34;时间＆＃34;必须包含在不同的组件中。

add.html

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

为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>

如何包含表单控件＆＃34; time＆＃34;作为主窗体中的一个组件，所以我可以通过this.newForm.controls [＆＃39; time＆＃39;]来访问该值。值??

Answer 1

单个Form Control无法单独传递给子组件，必须在formGroup内传递。因此，在表单中添加一个组（此处命名为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>

和子模板：

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

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

@Input() timeGroup: FormGroup;

然后，您可以使用以下内容访问time值（在您的父级中）

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

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

Sample Plunker

Answer 2

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

将组件包含为FormControl Angular2

2 个答案: