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

如果您在ngModel之外使用<form>，则必须指定[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);
  }
}

如何使用angular2

1 个答案: