如何使用angular2提交非形式元素

Question

      <tbody>
      <tr *ngFor="let gasType of staffConfig.gasTypes">
        <td class="col-md-3">
          <input class="gas-name form-control" type="text" [(ngModel)]="gasType.name" name="gasName"
                 [disabled]="!isStaffEnabled">
        </td>
      </tr>
      </tbody>
    </table>
  </div>

  <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">
      <h3 class="panel-title">
        <img src="/assets/brand-icon.png">
        <span>Brands</span>
      </h3>
    </div>

    <!-- Table -->
    <table class="table">
      <tbody>
      <tr *ngFor="let brand of staffConfig.brands;let i = index;">
        <td>
          <input class="form-control" type="text" [(ngModel)]="brand.name" name="brands"
                 [disabled]="!isStaffEnabled">
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</tab>

<button id="saveChangesBtn" type="button" class="btn btn-primary" disabled>Save Changes</button>

我想将“保存”按钮绑定到组件中的方法。 所以我改变了：

<button id="saveChangesBtn" type="button" (ngSubmit)="registerUser(registrationForm.value) class="btn btn-primary" disabled>Save Changes</button>

但是，如果那不是<form>如何将字段绑定到模型？ 换句话说，如何将这些字段发送到服务器？ 我必须从组件中读取它们，然后组装一个对象。 但是，如何访问诸如registrationForm.value类的非表单模型？

Answer 1

如果在<form>之外使用ngModel ，则必须指定[ngModelOptions]={standalone:true} 。

模板

<div class="not-a-form">

    <input type="text" [(ngModel)]="model.foo" [ngModelOptions]="{standalone: true}" />

    <input type="text" [(ngModel)]="model.bar" [ngModelOptions]="{standalone: true}" />

    <button type="button" (click)="save(model)"> Send </button>

</div>

零件

@Component({
selector: 'selector',
...
})

class SomeComponent {
 model: any = {};

  save(data) {
    console.log(data);
  }
}