Question

我最近开始使用Angular2而且我遇到了问题。我想创建一个表单来生成一些多选题，这就是我的问题：

我有一个FormComponent，显示我的表单的布局。可以将AnswerComponent添加到FormComponent以提供有关该问题的多个选择。我一直在使用DynamicComponentLoader以编程方式在我的FormComponent中添加AnswerComponent。

事情是提交按钮必须属于FormComponent，我不知道如何提醒我的AnswerComponent将其数据发送到FormComponent，以便它可以收集所有数据并创建我的问题。

如果有人有想法会很棒！

谢谢！

Answer 1

我们来试试吧。我有一个管理公司详细信息的表单：

<form [ngFormModel]="companyForm">
  <field label="Name" [state]="companyForm.controls.name">
    <input [ngFormControl]="companyForm.controls.name" [(ngModel)]="company.name"/> {{name.valid}}
  </field>
  <field label="Tags">
    <tags [(labels)]="company.labels"></tags>
  </field>

  <button type="submit" [disabled]="!companyForm.valid">Submit</button>
</form>

如您所见，我使用了两个子组件：

field旨在使用Bootstrap3为字段块构建布局的tags。它接受一个变量区域来提供表单元素（input，select，textarea）。此组件还利用关联的控件来显示验证错误（如果有）。
tags管理company属性的字符串列表。它允许显示，添加和删除标签。

您可以看到每个表单元素都利用双向绑定。这意味着每个表单元素都与组件对象的属性相关联。这是company属于组件属性的那个。

这意味着当您要提交表单时，可以使用此company对象来构建相应HTTP请求的有效负载，例如。

让我们与[(ngModel)]对象相关联。对于输入，使用具有以下语法的ngModel指令显而易见：tags。使用labels子组件，它可能不那么明显。

实际上，您需要定义输入和输出以使用两种方式绑定来管理@Input labels:string[] @Output labelsChanged: EventEmitter：

emit

更新标签后，您需要调用labelsChanged的{{1}}方法。

以下是TagsComponent组件的完整代码：

@Component({
  selector: 'tags',
  template: `
    <div *ngIf="labels">
      <span *ngFor="#label of labels" style="font-size:14px"
          class="label label-default" (click)="removeLabel(label)">
        {{label}} <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
      </span>
      <span>&nbsp;|&nbsp;</span>
      <span style="display:inline-block;">
        <input [(ngModel)]="labelToAdd" style="width: 50px; font-size: 14px;" class="custom"/>
        <em class="glyphicon glyphicon-ok" aria-hidden="true" (click)="addLabel(labelToAdd)"></em>
      </span>
    </div>
  `
})
export class TagsComponent implements OnInit {
  @Input()
  labels:string[];
  @Output()
  labelsChange: EventEmitter;

  constructor(private elementRef:ElementRef) {
    this.labelsChange = new EventEmitter();
  }

  removeLabel(label:string) {
    var index = this.labels.indexOf(label, 0);
    if (index != undefined) {
       this.labels.splice(index, 1);
       this.labelsChange.emit(this.labels);
    }
  }

  addLabel(label:string) {
    this.labels.push(this.labelToAdd);
    this.labelsChange.emit(this.labels);
    this.labelToAdd = '';
  }
}

希望它可以帮到你，亨利

提交由多个组件组成的表单

1 个答案: