如何使用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); 
    } 
}