代码之家 › 专栏 › 技术社区 › monstertjie_za

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

angular-reactive-forms typescript angular

0

monstertjie_za · 技术社区 · 7 年前

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

我怎样才能做到这一点?

1 回复 | 直到 7 年前

1

AT82 7 年前

表单值与您的类不匹配。在表单中有嵌套的组: providerInformation , contactInformation contactPeople

另外,我发现至少有一个表单控件出现了一些问题。。。你用过 Untill ,即使在您的类中,属性是 Until

最简单的解决方案是构建这样的表单,它可以直接分配给模型。否则,您需要自己映射属性,当您可以构建表单以使其与您的模型匹配时,这可能会变得丑陋,并且似乎不必要。

FriendlyName 实际上是在其中一个嵌套组中,所以如果您执行以下操作,您不会得到 undefined :

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

但是你的编译器会抱怨 提供信息 不存在于 Provider