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

Question

我最近开始使用 Angular2，但遇到了一个问题。我想创建一个表单来生成一些多项选择题，这是我的问题:

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

问题是提交按钮必须属于 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 为字段 block 构建布局。它接受一个可变区域来提供表单元素(input、select、textarea)。该组件还利用关联控件显示验证错误(如果有)。
• tags 管理作为字符串列表的tags 属性。它允许显示、添加和删除标签。

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

这意味着当你想提交表单时，你可以使用这个 company 对象来构建相应的 HTTP 请求的负载。

让我们更多地处理与 company 对象相关联的内容。对于输入，使用 ngModel 指令的语法很明显:[(ngModel)]。使用 tags 子组件，它可能不那么明显。

事实上，您需要定义输入和输出以通过两种方式绑定(bind)来管理标签:

@Input labels:string[]
@Output labelsChanged: EventEmitter

标签更新时，需要调用labelsChanged的emit方法。

下面是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 = '';
  }
}

希望对你有帮助，蒂埃里