使用Angular2反應形式丟失控件

Question

編輯：下面的每個討論的固定按鈕。但是，除非我誤解了某些內容，否則連接到表單的數據結構不會更新。還編輯了第一段並替換了圖像。

我遇到了Angular2和FormBuilder的一個奇怪的錯誤。我放在一起的例子有名字，姓氏字段和一個提交按鈕。但是，更改的值不會通過數據結構提交。下面是一個屏幕截圖：

它不是由物質引起的，但是。刪除材料指令：

我很困惑爲什麼這個看起來很簡單的表單失敗。建議？

app.component.html：

<h1> 
    {{title}} 
</h1> 

<form *ngIf="myForm" [formGroup]="myForm" (submit)="onSubmit()" > 
    <md-input-container> 
     <input mdInput placeholder="First Name" formControlName="firstName" required > 
     <div class="error" *ngIf="myForm.get('firstName').touched && myForm.get('firstName').hasError('required')"> 
     First Name is required 
     </div> 
    </md-input-container> 

    <md-input-container> 
     <input mdInput placeholder="Last Name" formControlName="lastName" required > 
     <div class="error" *ngIf="myForm.get('lastName').touched && myForm.get('lastName').hasError('required')"> 
     Last Name is required 
     </div> 
    </md-input-container> 
    <div> 
     <button type="submit" md-raised-button>Submit</button> 
    </div> 

</form> 

app.component.ts：

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms'; 

interface Name { 
    firstName: string; 
    lastName: string; 
} 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
// templateUrl: './app.component2.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit, OnDestroy { 
    title = 'Using FormBuilder'; 
    myForm: FormGroup; 
    data: Name; 

    constructor(private fb: FormBuilder) { 

    } 

    ngOnInit() { 

    this.data = this.loadData(); 
    this.myForm = this.createForm(); 
    } 

    ngOnDestroy() { 

    } 

    onSubmit() { 
    console.log("name=", JSON.stringify(this.data)); 
    } 

    private loadData(): Name { 
    const result: Name = <Name>{ 
     "firstName": "John", 
     "lastName": "Doe" 
    } 

    return result; 
    } 

    private createForm(): FormGroup { 
    const result: FormGroup = this.fb.group({ 
     "firstName": [this.data.firstName, [Validators.required]], 
//  "lastName": [this.data.lastName, [Validators.required, MyValidators.validateName]] 
     "lastName": [this.data.lastName, [Validators.required]] 
    }); 
    return result; 
    } 
} 

Answer 1

您的按鈕應該是類= 「MD-提出鍵」