我有一个带有多个字段的角形，包括单选按钮，选择和输入。我有一个onSubmit（）函数，当我提交表单时会调用它。在此函数中，我有一个console.log（form）。在Google调试器上检查控制台时，我看到从控制台日志返回的值是不确定的。
app.component.ts
import { Component, HostBinding } from "@angular/core";
import { NgForm } from "@angular/forms";
import { Person, Name, Address } from "../app/models/person";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"];
export class AppComponent {
title = "pardon";
provinces = [
"Alberta",
"British Columbia",
"Manitoba",
"New Brunswick",
"Newfoundland and Labrador",
"Northwest Territories",
"Nova Scotia",
"Nunavut",
"Ontario",
"Prince Edward Island",
"Quebec",
"Saskatchewan",
"Yukon"
];
person: Person;
name: Name;
date: Date;
address: Address;
nameCap: number;
cap: boolean;
showDelete: boolean;
showNameInput: boolean;
showAddressInput: boolean;
ngOnInit() {
this.person = new Person();
this.person.fullName = new Name();
this.person.currentAddress = new Address();
this.person.previousAddress = [];
this.person.alias = [];
this.showDelete = false;
this.showNameInput = false;
this.showAddressInput = false;
this.nameCap = 1;
this.cap = false;
}
onSubmit(form: NgForm) {
console.log(form);
}
addName() {
this.person.alias.push({ firstName: "", lastName: "" });
this.showDelete = true;
this.showNameInput = true;
this.nameCap++;
if (this.nameCap > 4) {
this.cap = true;
}
}
addAddress(){
this.person.previousAddress.push({ streetAddress: "", city: "", province: "", country: "", postalCode: ""});
this.showAddressInput = true;
}
trackByName(index: number, person: any) {
return person.id;
}
removeName(i: number) {
this.person.alias.splice(i, 1);
this.nameCap--;
if (this.nameCap <= 4) {
this.cap = false;
}
}
}
app.component.html
<div class="container">
<div class="row">
<div class="card card-body">
<h4 class="card-title bg-success">Pardon Application Electronic Form</h4>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<div id="user-data"
ngModelGroup="userData"
#userData="ngModelGroup">
<div class="card card-body bg-info">
<h4 class="card-title bg-primary">Section A: Personal Information</h4>
<div class="card-text form-inline">
<label for="firstname">First name</label>
<input
type="text"
id="firstname"
class="form-control"
[(ngModel)]="person.fullName.firstName"
name="firstName"
required
#firstName="ngModel">
<span class="help-block" *ngIf="!firstName.valid && firstName.touched">Please enter your first name</span>
<label for="lastname">Last name</label>
<input
type="text"
id="lastname"
class="form-control"
[(ngModel)]="person.fullName.lastName"
name="lastName"
required
#lastName="ngModel">
<span class="help-block" *ngIf="!lastName.valid && lastName.touched">Please enter your last name</span>
<label>Have you ever used another name other than your legal name above?</label>
<div class="radio">
<label>
<input
type="radio"
name="hasAlias"
[value]=true
[(ngModel)]="person.hasAlias"
#hasAlias="ngModel">
Yes
</label>
</div>
<div class="radio">
<label>
<input
type="radio"
name="hasAlias"
[value]=false
[(ngModel)]="person.hasAlias"
#hasAlias="ngModel">
No
</label>
</div>
<div *ngIf="person.hasAlias">
<br>
<div class="wrapper">
<button class="buttonAlign" [disabled]="cap"
class="btn help-block btn-warning"
type="button"
id="addName"
(click)="addName()">Add more names
</button>
</div>
<div *ngIf="showNameInput">
<div ngModelGroup="alias">
<div class="box2" *ngFor="let a of person.alias; let i = index; trackBy: trackByName">
<!-- style="width: 100px; height: 100px" [@divState]="state" -->
<div [ngModelGroup]="i">
<div class="form-group">
<label for="firstNameAlias">First name</label>
<input
type="text"
id="firstName"
class="form-control"
[(ngModel)]="a.firstName"
name="firstName"
#firstName="ngModel">
</div>
<div class="form-group">
<label for="lastNameAlias">Last name</label>
<input
type="text"
id="lastName"
class="form-control"
[(ngModel)]="a.lastName"
name="lastName"
#lastName="ngModel">
</div>
</div>
<button
class="btn help-block btn-danger"
type="button"
id="removeName"
(click)="removeName(i)">Remove name
</button>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
<div class="card card-body bg-warning">
<div class="card-text">
<div class="row">
<div class="col-md-3">
<label>Sex</label>
<select class="form-control">
<option *ngFor="let s of person.sex"
name="sex"
[value]="sex"
[(ngModel)]="person.sex"
#sex="ngModel"
ngDefaultControl>{{s}}
</option>
</select>
</div>
<div class="col-md-3">
<label>Date of Birth</label>
<div class="form-group form-inline">
<input
type="date"
name="person.dob"
[(ngModel)]="person.dob"
#dob="ngModel"
required>
</div>
</div>
<div class="col-md-3">
<label>Were you born in Canada?</label>
<div class="radio">
<label>
<input
type="radio"
name="person.canadianBorn"
[value]=true
[(ngModel)]="person.canadianBorn"
#canadianBorn="ngModel">
Yes
</label>
</div>
<div class="radio">
<label>
<input
type="radio"
name="person.canadianBorn"
[value]=false
[(ngModel)]="person.canadianBorn"
#canadianBorn="ngModel">
No
</label>
</div>
<div *ngIf="person.canadianBorn">
Born in Canada!
</div>
<div *ngIf="person.canadianBorn==false">
See STEP 5 of the Record Suspension application Guide
</div>
</div>
</div>
</div>
</div>
<div class="card card-body bg-info">
<div class="card-text">
<div class="row">
<div class="col-md-6">
<label>Do you have a driver's license?</label>
<div class="radio">
<label>
<input
type="radio"
name="person.hasLicense"
[value]=true
[(ngModel)]="person.hasLicense"
#hasLicense="ngModel">
Yes
</label>
</div>
<div class="radio">
<label>
<input
type="radio"
name="person.hasLicense"
[value]=false
[(ngModel)]="person.hasLicense"
#hasLicense="ngModel">
No
</label>
</div>
<div *ngIf="person.hasLicense">
<label>Driver's License Number</label>
<input type="text"
class="form-control"
placeholder="A1234-56789-12345"
id="name"
name="person.licenseNumber"
[(ngModel)]="person.licenseNumber"
#licenseNumber="ngModel">
<label for="province">Province issued</label>
<select
id="province"
class="form-control"
ngModel
name="provinceIssued">
<option *ngFor="let province of provinces">
{{province}}
</option>
</select>
</div>
<br>
</div>
<div class="col-md-6">
<label>Are you employed?</label>
<div class="radio">
<label>
<input
type="radio"
name="person.employed"
[value]=true
[(ngModel)]="person.employed"
#employed="ngModel">
Yes
</label>
</div>
<div class="radio">
<label>
<input
type="radio"
name="person.employed"
[value]=false
[(ngModel)]="person.employed"
#employed="ngModel">
No
</label>
</div>
<div class="checkbox">
<label>
<input
type="checkbox"
name="person.selfEmployed"
[value]=true
[(ngModel)]="person.selfEmployed"
#selfEmployed="ngModel">
I am self employed
</label>
</div>
<div *ngIf="person.employed">
<label>Employer name</label>
<input type="text"
class="form-control"
id="employer"
name="person.employer"
[(ngModel)]="person.employer"
#employer="ngModel">
</div>
<div *ngIf="person.selfEmployed">
<label>Your company name and/or number</label>
<input type="text"
class="form-control"
id="company"
name="person.company"
[(ngModel)]="person.company"
#company="ngModel">
</div>
<br>
</div>
</div>
</div>
</div>
<div class="card card-body bg-warning">
<h4 class="card-title bg-primary">Section B: Correspondence and Residence Information</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Street Address</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.streetAddress"
#streetAddress="ngModel"
name="streetAddress">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>City</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.city"
#city="ngModel"
name="city">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Province</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.province"
#province="ngModel"
name="province">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Country</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.country"
#country="ngModel"
name="country">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Postal Code</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.postalCode"
#postalCode="ngModel"
name="postalCode">
</div>
</div>
</div>
<div class="wrapper">
<button class="buttonAlign"
class="btn help-block btn-warning"
type="button"
>Verify Address
</button>
</div>
</div>
<div class="card-body bg-info">
<label>Do you want information in English or French?</label>
<select class="form-control">
<option *ngFor="let lang of person.language"
name="language"
[value]="language"
[(ngModel)]="person.language"
#language="ngModel"
ngDefaultControl>
{{lang}}
</option>
</select>
<!-- <div class="radio" *ngFor="let lang of person.language">
<label>
<input
type="radio"
name="language"
[(ngModel)]="person.language"
[value]="lang"
required>
{{ lang }}
</label>
</div> -->
<label>Have you lived at an address different from the one entered above, within the last 10 years?</label>
<div class="radio">
<label>
<input
type="radio"
name="person.moreAddresses"
[value]=true
[(ngModel)]="person.moreAddresses"
#moreAddresses="ngModel">
Yes
</label>
</div>
<div class="radio">
<label>
<input
type="radio"
name="person.moreAddresses"
[value]=false
[(ngModel)]="person.moreAddresses"
#moreAddresses="ngModel">
No
</label>
</div>
<div class="card-body bg-warning" *ngIf="person.moreAddresses">
<div class="wrapper">
<button class="buttonAlign"
class="btn help-block btn-warning"
type="button"
id="addAddress"
(click)="addAddress()">Add an address
</button>
</div>
<br>
<div *ngFor="let addy of person.previousAddress">
<div class="row" *ngIf="showAddressInput">
<div class="col-md-6">
<div class="form-group">
<label>Street Address</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.streetAddress"
#streetAddress="ngModel"
name="streetAddress">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>City</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.city"
#city="ngModel"
name="city">
</div>
</div>
</div>
<div class="row" *ngIf="showAddressInput">
<div class="col-md-4">
<div class="form-group">
<label>Province</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.province"
#province="ngModel"
name="province">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Country</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.country"
#country="ngModel"
name="country">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Postal Code</label>
<input type="text"
class="form-control"
[(ngModel)]="person.currentAddress.postalCode"
#postalCode="ngModel"
name="postalCode">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<button
class="btn btn-primary"
type="submit"
[disabled]="!f.valid"
(click)="onSubmit()"
>Submit
</button>
</div>
</div>
person.ts
export class Person {
public fullName: Name;
public alias: Name[];
public currentAddress: Address;
public previousAddress: Address[];
public canadianBorn: boolean;
public hasLicense: boolean;
public licenseNumber: number;
public hasAlias: boolean;
public employed: boolean;
public employer: string;
public selfEmployed: boolean;
public sex = ['Male', 'Female', 'Other'];
public language = ['English', 'Francais'];
public moreAddresses: boolean;
public dob = Date;
public company: string;
}
export class Name {
public firstName: string;
public lastName: string;
}
export class Address {
public streetAddress: string;
public city: string;
public province: string;
public country: string;
public postalCode: string;
}
答案 0 :(得分：0)
像这样使用提交按钮：
<button type="submit" [disabled]="!f.valid">Submit</button>
日志模板驱动的表单值：
console.log(form)
记录响应式表单值：
console.log(form.value)
答案 1 :(得分：0)
（click）=“ onSubmit（）” 我没有在click事件上传递任何参数，因此为什么console.log返回未定义。
传递参数“ f”（click）=“ onSubmit（f）”获得了输出表单数据的预期结果。