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