Question

我正在通过与用户实例相对应的ngFor指令（用户输入）来显示n个filds但我的问题是在验证点击按钮后将此对象值放在此数组中的最佳方法是什么。

  <ul style="list-style-type: none">
  <li *ngFor="let number of nbCollaborateur">
    <div class="row" >
      <div class="col-md-3">
        <label class="control-label">Nom et prenom </label>
        <input type="text" class="form-control">

        <div class="col-md-3">
          <div class="form-group form-black label-floating is-empty">
            <label class="control-label">telephone</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group form-black label-floating is-empty">
            <label class="control-label">adresse</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group form-black label-floating is-empty">
            <label class="control-label">commantaire</label>
            <input type="text" class="form-control">
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

我的数组看起来像这样：

users: User[];
this.users.push(new User());

Answer 1

我的html中没有看到任何按钮。但是你可以在组件中处理验证逻辑，然后推送到数组。

如果您向数组添加新项目，则会自动将其添加到模板中，因为您有* ngFor循环。

以下是一些有用的用例链接：

https://www.youtube.com/watch?v=xYv9lsrV0s4&t=804s

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

https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html

通过带有角度

1 个答案: