我有以下内容：
export class ProvidersComponent implements OnInit {
public providerFormGroup: FormGroup;
constructor(private fb: FormBuilder,
private dlService: DataListingService,
private tbaService: TopBarActionsService) {
}
ngOnInit() {
this.populateForm();
this.subscribeToTopBarAction();
}
populateForm(): void {
this.providerFormGroup = this.fb.group({
providerInformation: this.fb.group({
Name: [''],
FriendlyName: [''],
Since: [Date.now],
Untill: [''],
CompanyRegistrationNumber: [''],
VatRegistrationNumber: [''],
TfgUniqueReferenceNumber: ['']
}),
contactInformation: this.fb.group({
PhysicalAsPostal: [false],
PhysicalAddressLine1: [''],
PhysicalAddressLine2: [''],
PhysicalAddressLine3: [''],
PhysicalCityTown: [''],
PhysicalPostalCode: [''],
PostalAddressLine1: [''],
PostalAddressLine2: [''],
PostalAddressLine3: [''],
PostalCityTown: [''],
PostalPostalCode: [''],
EmailAddress: [''],
ContactNumber: [''],
AlternativeContactNumber: ['']
}),
contactPeople: this.fb.group({
ContactPeople: [''],
Role: [''],
Title: [''],
Initials: [''],
Name: [''],
Surname: [''],
EmailAddress: [''],
ContactNumber: [''],
AlternativeContactNumber: ['']
})
});
}
onSubmit(): void {
//let provider: Provider = Object.assign({}, this.providerFormGroup.value);
let provider: Provider = new Provider();
provider = this.providerFormGroup.value;
console.log(provider.FriendlyName);
}
}
以下模板文件：
<form [formGroup]="providerFormGroup" (ngSubmit)="onSubmit()">
<ngb-tabset>
<ngb-tab>
<ng-template ngbTabTitle>
<div class="tablinks" (click)="activateTab(0)">
Provider information
</div>
</ng-template>
<ng-template ngbTabContent>
<div class="tabcontent">
<div formGroupName="providerInformation" class="halfsize">
<div class="row">
<label>
<strong>Name</strong>
<input type="text" formControlName="Name" placeholder="Mobile Telecommunications Network" />
</label>
</div>
<div class="row">
<label>
<strong>Short name</strong>
<input type="text" formControlName="FriendlyName" placeholder="MTN" />
</label>
</div>
<div class="row">
<div class="half">
<label>
<strong>Provider since</strong>
<input type="date" formControlName="Since" placeholder="1 January 2019" />
</label>
</div>
<div class="half">
<label>
<strong>Provider untill</strong>
<input type="date" formControlName="Untill" />
</label>
</div>
</div>
<div class="row">
<label>
<strong>Company registration number</strong>
<input type="text" formControlName="CompanyRegistrationNumber" placeholder="0000007891234" />
</label>
</div>
<div class="row">
<label>
<strong>VAT registration number</strong>
<input type="text" formControlName="VatRegistrationNumber" placeholder="121 000 345" />
</label>
</div>
<div class="row">
<label>
<strong>TFG's unique reference at the provider</strong>
<input type="text" formControlName="TfgUniqueReferenceNumber" placeholder="MTNO2O" />
</label>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle>
<div class="tablinks" (click)="activateTab(1)">
Provider contact infromation
</div>
</ng-template>
<ng-template ngbTabContent>
<div class="tabcontent">
<div class="halfsize" formGroupName="contactInformation">
<div class="row">
<label>
<strong>Physical Address</strong>
<input type="text" formControlName="PhysicalAddressLine1" />
</label>
</div>
<div class="row">
<input type="text" formControlName="PhysicalAddressLine2" />
</div>
<div class="row">
<input type="text" formControlName="PhysicalAddressLine3" />
</div>
<div class="row">
<div class="half">
<label>
<strong>City/Town</strong>
<input type="text" formControlName="PhysicalCityTown" />
</label>
</div>
<div class="half">
<label>
<strong>Postal Code</strong>
<input type="text" formControlName="PhysicalPostalCode" />
</label>
</div>
</div>
<div class="row">
<div class="left">
<label>Use the physical address as the postal address?</label>
</div>
<div class="right">
<tfg-toggle formControlName="PhysicalAsPostal" [onText]="'Yes'" [offText]="'No'"></tfg-toggle>
</div>
</div>
<div class="row">
<label>
<strong>Postal Address</strong>
<input type="text" formControlName="PostalAddressLine1" />
</label>
</div>
<div class="row">
<input type="text" formControlName="PostalAddressLine2" />
</div>
<div class="row">
<input type="text" formControlName="PostalAddressLine3" />
</div>
<div class="row">
<div class="half">
<label>
<strong>City/Town</strong>
<input type="text" formControlName="PostalCityTown" />
</label>
</div>
<div class="half">
<label>
<strong>Postal Code</strong>
<input type="text" formControlName="PostalPostalCode" />
</label>
</div>
</div>
<div class="row">
<label>
<strong>Email address</strong>
<input type="email" formControlName="EmailAddress">
</label>
</div>
<div class="row">
<label>
<strong>Contact Number</strong>
<input type="text" formControlName="ContactNumber" placeholder="+27 845880635" />
</label>
</div>
<div class="row">
<label>
<strong>Alternative Contact Number (optional)</strong>
<input type="text" formControlName="AlternativeContactNumber" placeholder="+27 845880635" />
</label>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle>
<div class="tablinks" (click)="activateTab(2)">
Contact people at the provider
</div>
</ng-template>
<ng-template ngbTabContent>
<div class="tabcontent">
<div class="half" formGroupName="contactPeople">
<div class="row">
<label>
<strong>Contact People</strong>
<input type="text" formControlName="ContactPeople" placeholder="John Doe">
</label>
</div>
<div class="row">
<label>
<strong>Role</strong>
<input type="text" formControlName="Role" placeholder="Sales consultant" />
</label>
</div>
<div class="row">
<label>
<strong>Title</strong>
<select id="title" formControlName="Title">
<option disabled selected>-- Please select --</option>
<option *ngFor="let title of titles" [ngValue]="title.Id">
{{title.TitleDescription}}
</option>
</select>
</label>
</div>
<div class="row">
<label>
<strong>Initials</strong>
<input type="text" formControlName="Initials" placeholder="JD" />
</label>
</div>
<div class="row">
<label>
<strong>Name</strong>
<input type="text" formControlName="Name" placeholder="John" />
</label>
</div>
<div class="row">
<label>
<strong>Surname</strong>
<input type="text" formControlName="Surname" placeholder="Doe" />
</label>
</div>
<div class="row">
<label>
<strong>Email address</strong>
<input type="email" formControlName="EmailAddress" placeholder="johndoe@email.com" />
</label>
</div>
<div class="row">
<label>
<strong>Contact Number</strong>
<input type="text" formControlName="ContactNumber" placeholder="+27 845880635" />
</label>
</div>
<div class="row">
<label>
<strong>Alternative Contact Number (optional)</strong>
<input type="text" formControlName="AlternativeContactNumber" placeholder="+27 845880635" />
</label>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle>
<div class="tablinks" (click)="activateTab(3)">
Provider's Financial Accounts at TFG
</div>
</ng-template>
<ng-template ngbTabContent>
<div class="tabcontent">
<div formGrouName="financialAccounts">
<div class="row">
<div class="half">
</div>
<div class="half">
</div>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle>
<div class="tablinks" (click)="activateTab(4)">
Saving the provider
</div>
</ng-template>
<ng-template ngbTabContent>
<div class="tabcontent">
<h3>Saving the provider</h3>
<p>Financial accounts (note these are not bank accounts) are created at TFG for each provider
to facilitate the reconciliation of funds paid by the Provider to TFG and by TFG to the Provider.
At least one account must be specified for a provider.
</p>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</form>
最后，我希望此表单表示并能够分配给该模型：
export class Provider {
public Id: string;
public Name: string;
public FriendlyName: string;
public CompanyRegistrationNumber: string;
public VatRegistrationNumber: string;
public TfgUniqueReferenceNumber: string;
public Since: Date;
public Until: Date;
public DefaultBillingDay: number;
public DefaultProvisioningDay: number;
public AllowsToProvisionProRata: boolean;
public AllowsToBillProRata: boolean;
public EmailAddress: string;
public DateCreated: Date;
public DateModified: Date;
public UserCreated: string;
public UserModified: string;
public IsRetired: boolean;
public ImageUrl: string;
public ContactNumber1: ContactNumber;
public ContactNumber2: ContactNumber;
public PhysicalAddress: Address;
public PostalAddress: Address;
public FinancialSystemAccount: FinancialSystemAccount;
public WholesaleProducts: Array<WholesaleProduct>;
public ContactPeople: Array<ContactPerson>;
public Batches: Array<Batch>;
public BatchCandidates: Array<BatchCandidate>;
public AllowableBatchTypes: Array<BatchType>;
}
我尝试了以下两种方法，但是console中的结果始终为undefined。
let provider: Provider = Object.assign({}, this.providerFormGroup.value);
let provider: Provider = new Provider();
provider = this.providerFormGroup.value;
console.log(provider.FriendlyName);
我该如何实现？
答案 0 :(得分：1)
表单值与您的班级不匹配。在您的表单中，您具有嵌套的组：providerInformation，contactInformation和contactPeople。这些在您的班级中不存在。
我也至少在您的表单控件中看到了一个问题……您使用了Untill，即使在您的课程中，属性为Until
最简单的解决方案是按原样构建表单，该表单可以直接分配给模型。否则，您需要自己映射属性，这些属性可能很难看，并且在构建表单以使其与模型匹配时显得不必要。
作为一个注释，为什么控制台日志未打印，是因为您的FriendlyName实际上在这些嵌套组之一中，因此，如果执行以下操作，则不会得到{{1} }：
undefined但是，您的编译器会抱怨let provider: Provider = Object.assign({}, this.providerFormGroup.value);
console.log(provider.providerInformation.FriendlyName); // not undefined!
中不存在providerInformation。当然是正确的。