相关疑难解决方法(0)

这只是疯狂,看起来没有办法让一个表单中的一个输入在子组件中.

我已阅读所有博客和教程以及所有内容,无法解决这个问题.

问题是当一个子组件要有任何形式的指令(ngModel,ngModelGroup或其他......)时,它不会工作.

这只是模板驱动表单中的一个问题

这是plunker:

import { Component } from '@angular/core';

@Component({
  selector: 'child-form-component',
  template: ` 
  <fieldset ngModelGroup="address">
    <div>
      <label>Street:</label>
      <input type="text" name="street" ngModel>
    </div>
    <div>
      <label>Zip:</label>
      <input type="text" name="zip" ngModel>
    </div>
    <div>
      <label>City:</label>
      <input type="text" name="city" ngModel>
    </div>
  </fieldset>`
})

export class childFormComponent{


}

@Component({
  selector: 'form-component',
  directives:[childFormComponent],
  template: `
    <form #form="ngForm" (ngSubmit)="submit(form.value)">
      <fieldset ngModelGroup="name">
        <div>
          <label>Firstname:</label>
          <input type="text" name="firstname" ngModel>
        </div>
        <div>
          <label>Lastname:</label>
          <input type="text" name="lastname" ngModel>
        </div>
      </fieldset>

      <child-form-component></child-form-component>

      <button type="submit">Submit</button>
    </form>

    <pre>
      {{form.value | …

我使用以下教程在Angular 2中创建反应形式,它运行良好.

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

但是,我现在正在尝试在数组中添加一个数组.使用上面的教程,我创建了一个"组织"表单,其中可以包含一组"联系人"组.但我无法成功调整设置以允许每个"联系人"组包含一组"电子邮件"组.

我一直无法找到涵盖此内容的教程或示例,并对任何指针表示感谢.

我希望创建一个有两个目的的组件，因为背后的代码是相同的。

所以我决定使用ng-template。

第一部分是模态弹出窗口，html 如下所示：

<div class="modal fade" #modal="mdbModal" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
    aria-hidden="true" mdbModal ng-if="!static && saveForm">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="card" [formGroup]="saveForm" (ngSubmit)="onSubmit()">
                <div class="modal-header">
                    <h4 class="modal-title pull-left">Are you sure?</h4>
                    <button type="button" class="close pull-right" aria-label="Close" (click)="modal.hide()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div *ngTemplateOutlet="form"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" (click)="modal.hide()">Cancel</button>
                    <button type="submit" class="btn btn-primary" (click)="modal.hide()">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

第二部分是静态形式，看起来像这样：

<form class="card" [formGroup]="saveForm" (ngSubmit)="onSubmit()" [ngClass]="{ 'mb-0': modal }"
    *ngIf="static && saveForm">
    <div class="card-header">
        <h3 …