角2 - NgForm空提交表單時

Question

大家

嗨，我正在做一個「DINAMIC」形式角度，我有一些問題，得到的數值，在表單輸入，我的代碼是：

HTML

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)" *ngFor="let con of controls" novalidate> 
    <div class="form-group" *ngIf = "con.type != 'submit'"> 
    <label for="{{con.id}}">{{con.label}}</label> 
    <input [(ngModel)]="con.name" type="{{con.type}}" class="{{con.class}}" name="{{con.id}}"> 
</div> 
<input *ngIf = "con.type == 'submit'" type="submit" class="{{con.class}}" value={{con.label}}> 
</form> 

組件：

import { Component ,Input} from '@angular/core'; 
import { NgForm } from '@angular/forms'; 


@Component({ 
    selector: 'form-tag', 
    templateUrl: './form.html', 
}) 

export class FormComponent { 
    @Input() controls: any[]; 

    onSubmit(sub: NgForm) 
    { 
     console.log(sub.email); 
    } 
} 

問題是，當我提交表單的console.log（sub.email）;返回一個空對象

Answer 1

由於您使用的是ngForm，它是一個模板驅動的表單，而不是被動的。在模板驅動的形式，你需要通過myForm.value到的onsubmit（）：

onSubmit(myForm.value) 

此外，從您的代碼示例，目前還不清楚什麼是騙子。

Answer 2

我真的不確定你想要做什麼，但它看起來像是在使用<form>標記代替div.form-group和<input />本身。

也許包裝在一個<ng-template />並通過它循環而不是<form>標記？

因此，像這樣：

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)" novalidate> 
    <ng-template *ngFor="let con of controls"> 
     <div class="form-group" *ngIf="con.type != 'submit'"> 
     <label for="{{con.id}}">{{con.label}}</label> 
     <input [(ngModel)]="con.name" type="{{con.type}}" class="{{con.class}}" name="{{con.id}}" /> 
    </div> 
    <input *ngIf="con.type == 'submit'" type="submit" class="{{con.class}}" [value]="con.label" /> 
</form>