如何在保存模式下将 Html5 元素绑定到 angular2 源代码

Question

这里我使用的是 Angular2，我实现了一些 html 用户访问代码，但是为什么这个数据在 Angular2 源代码端没有绑定

HTML代码

<form class="form-horizontal" novalidate [formGroup]="EmployeeForm">
  <fieldset>
        <div class="form-group" [ngClass]="{'has-error': (EmployeeForm.get('EmpName').touched ||
                                                  EmployeeForm.get('EmpName').dirty) &&
                                                    !EmployeeForm.get('EmpName').valid }">
            <label for="name">Name</label>
            <input type="text" class="form-control" formControlName="EmpName" [(ngModel)]="EmpName" />
            <span>{{EmpName}}</span>
            <span class="help-block" *ngIf="(EmployeeForm.get('EmpName').touched ||
                                                         EmployeeForm.get('EmpName').dirty) &&
                                                         EmployeeForm.get('EmpName').errors">
                <span *ngIf="EmployeeForm.get('EmpName').errors.required">
                    Please enter your first name.
                </span>
                <span *ngIf="EmployeeForm.get('EmpName').errors.minlength || EmployeeForm.get('EmpName').errors.maxlength ||
                      EmployeeForm.get('EmpName').pattern">
                    The first name must be longer than A3 and max5 characters.
                </span>
            </span>
        </div>
 <button type="submit" class="btn btn-success" [disabled]="!EmployeeForm.valid" (click)="SaveDetails(EmployeeForm)">SaveDetails</button>
    </fieldset>
</form>

component.ts 在这里它的 ping 但数据没有绑定它显示为

zain = FormGroup {asyncValidator: null, _pristine: false, _touched: true, validator: function, _onCollectionChange: function…}



SaveDetails(Employee) {

    }

Answer 1

尝试更改

中的代码

<button type="submit" class="btn btn-success" [disabled]="!EmployeeForm.valid" (click)="SaveDetails(EmployeeForm)">SaveDetails</button>

到

<button type="submit" class="btn btn-success" [disabled]="!EmployeeForm.valid" (click)="SaveDetails(EmployeeForm.value)">SaveDetails</button>

如何在保存模式下将 Html5 元素绑定到 angular2 源代码

How to bind Html5 element to angular2 source code during saving mode

html

angular2-forms