如何使用angular2提交非表单元素答案

【问题标题】：how to submit a non-form element using angular2如何使用angular2提交非表单元素
【发布时间】：2016-09-19 15:51:59
【问题描述】：

      <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 这样的非形式模型？

【问题讨论】：

(ngSubmit) 用于 <form>s 使用 (click) 代替
我如何在组件中与 ui 文本字段相关联？

标签： javascript html angular

【解决方案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);
  }
}

【讨论】：