I'm running into a strange error with Angular2 and FormBuilder. The example I've put together has first name, last name fields along with a submit button. However, when run using Material, the two pre-loaded values display, but not the submit button. The submit button is actually present in the HTML, so you can tab to it and do a submit. However, changed values are not submitted. Here is a screen shot:
It's not caused by Material, however. Removing Material directives:
I'm baffled why this apparently simple form fails. Suggestions?
app.component.html:
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 = { "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; }
}