如何将 FormGroup 的 formGroupNames 分配给我的模型

Question

我有以下组件：

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);

我怎样才能做到这一点？

Answer 1

表单值与您的 class 不匹配。在您的表单中，您有嵌套组：providerInformation、contactInformation 和 contactPeople。这些在您的 class 中不存在。

此外，我至少在您的一个表单控件中发现了一些问题...您使用了 Untill，即使在您的 class 中，属性是 Until

最简单的解决方案是按原样构建您的表单，即开箱即可分配给您的模型。否则你需要自己映射属性，当你构建你的表单以匹配你的模型时，这可能会变得丑陋并且看起来没有必要。

请注意，为什么您的控制台日志打印未定义，是因为您的 FriendlyName 实际上在这些嵌套组之一中，因此如果您执行以下操作，您将不会得到 undefined:

let provider: Provider = Object.assign({}, this.providerFormGroup.value);
console.log(provider.providerInformation.FriendlyName); // not undefined!

但是你的编译器会抱怨 providerInformation 在 Provider 中不存在。这当然是正确的。

如何将 FormGroup 的 formGroupNames 分配给我的模型

How to assign FormGroup's formGroupNames to my model

typescript

angular

angular-reactive-forms