Question

我创建了一个angular 7应用，可以动态添加和删除控件。但是，我不确定如何将数据绑定到表单。

在下面的代码中，我正在尝试添加和删除网站。我弄清楚了数据未绑定到UI元素的原因。 FirmDetails模式下的网站是一个对象数组。在测试时，我添加了websiteUrl：FirmDetails.Websites [0] .WEBSITE_URL。如果我有多个物体怎么办。那我该如何绑定？

UI

 <div class="form-group row">
   <label for="inputEmail" class="col-md-1 col-form-label header">Websites</label>
   <div class="col-md-9">
      <div class="form-group row">
         <div class="col-md-3">
            <label for="inputEmail">Website URL</label>
         </div>
         <div class="col-md-3">
            <label for="inputEmail">User Name</label>
         </div>
         <div class="col-md-3">
            <label for="inputEmail">Password</label>
         </div>
      </div>
      <div formArrayName="websites"
         *ngFor="let item of frmFirm.get('websites').controls; let i = index; let last = last">
         <div [formGroupName]="i">
            <div class="form-group row">
               <div class="col-md-3">
                  <input style="width:100%" formControlName="websiteUrl"
                     placeholder="Website Url">
               </div>
               <div class="col-md-3">
                  <input style="width:100%" formControlName="username" placeholder="User Name">
               </div>
               <div class="col-md-3">
                  <input style="width:100%" formControlName="password" placeholder="Password">
               </div>
               <div class="col-md-3">
                  <button (click)="removeWebsite()">Remove Website</button>
               </div>
            </div>
         </div>
      </div>
      <button (click)="addWebsite()">Add Website</button>
   </div>
</div>

组件

import { Component, Injectable, NgZone, ViewEncapsulation, ViewChild, Input } from '@angular/core';
import { OnInit } from '@angular/core';
import { FirmService } from '../services/firm.service';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CommonDataService } from '../services/common.data.service';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';
import { ListItem } from '../models/listItem';


@Component({
    selector: 'mgr-firm',
    templateUrl: './firm.component.html'
})

export class FirmComponent implements OnInit {
    private Error: string;
    public FirmDetails: any;
    public EditMode: boolean;
    public Editor = ClassicEditor;
    public EditorConfig: string;
    public events: string[] = [];
    @Input() FirmId: number;
    DateFoundedDate: Date;
    public frmFirm: FormGroup;

    constructor(private _fb: FormBuilder, private firmService: FirmService, private commonDataService: CommonDataService) {

    }

    ngOnInit() {
        this.initializeFormModel();
        this.getFirmDetails();
    }


    initializeFormModel() {
        this.frmFirm = this._fb.group({
            firmName: [''],
            shortName: [''],
            alternateName: [''],
            dateFounded: [''],
            intraLinks: this._fb.array([
                this.createCredentials()
            ]),
            firmHistory: [''],
            People: [''],
            websites: this._fb.array([
                this.createWebsite()
            ]),
            addressess: this._fb.array([
                this.createAddress()
            ])
        });
    }

    // public addWebsite(): void {
    //     const websites = this.frmFirm.get('websites') as FormArray;
    //     websites.push(this._fb.control(''));
    //   }


    public addWebsite(): void {
        this.websites.push(this.createWebsite());
    }

    public removeWebsite(index: number): void {
        const websites = this.frmFirm.get('websites') as FormArray;
        websites.removeAt(index);
    }

    private createWebsite(): FormGroup {
        return this._fb.group({
            websiteUrl: [''],
            username: [''],
            password: ['']
        });
    }



    public addAddress(): void {
        this.addressess.push(this.createAddress());
    }

    public removeAddress(index: number): void {
        const addressess = this.frmFirm.get('addressess') as FormArray;
        addressess.removeAt(index);
    }

    private createAddress(): FormGroup {
        return this._fb.group({
            city: [''],
            street: [''],
            line2: [''],
            line3: [''],
            zipCode: [''],
            phone: ['']
        });
    }


    public addCredentials(): void {
        this.intraLinks.push(this.createCredentials());
    }

    public removeCredentials(index: number): void {
        const intraLinks = this.frmFirm.get('intraLinks') as FormArray;
        intraLinks.removeAt(index);
    }

    private createCredentials(): FormGroup {
        return this._fb.group({
            intraUsername: [''],
            intraPassword: ['']
        });
    }



    get websites(): FormArray {
        return <FormArray>this.frmFirm.get('websites');
    }

    get addressess(): FormArray {
        return <FormArray>this.frmFirm.get('addressess');
    }

    get intraLinks(): FormArray {
        return <FormArray>this.frmFirm.get('intraLinks');
    }

    get cities(): ListItem[] {
        return JSON.parse(this.FirmDetails.LongCitiesJson).map(x => new ListItem(x.CITY_ID, x.CITY_NAME, null));
    }

    setFormValues(FirmDetails: any) {
        this.frmFirm.patchValue({
            firmName: FirmDetails.Firm.NAME,
            shortName: FirmDetails.Firm.SHORT_NAME,
            alternateName: FirmDetails.Firm.ALTERNATE_NAME,
            dateFounded: this.getDate(FirmDetails.Firm.DATE_FOUNDED),
            firmHistory: FirmDetails.Firm.HISTORY_HTML,
            People: FirmDetails.People
        });
        const websiteGroup = this._fb.group({
            // websiteUrl: FirmDetails.Websites[0].WEBSITE_URL,
            // username: FirmDetails.Websites[0].USERNAME,
            // password: FirmDetails.Websites[0].PASSWORD
            websites: FirmDetails.Websites
        });
        this.frmFirm.setControl('websites', this._fb.array([websiteGroup]));
        const addressGroup = this._fb.group({
            city: this.FirmDetails.LongCitiesJson,
            addressess: FirmDetails.Addresses
            // street: FirmDetails.Firm.Addresses[0].LINE1,
            // line2: FirmDetails.Firm.Addresses[0].LINE2,
            // line3: FirmDetails.Firm.Addresses[0].LINE3,
            // zipCode: FirmDetails.Firm.Addresses[0].POSTAL_CODE,
            // phone: FirmDetails.Firm.Addresses[0].SWITCHBOARD_INT
        });
        this.frmFirm.setControl('addressess', this._fb.array([addressGroup]));
       const intraLinksGroup = this._fb.group({
            intraUsername: FirmDetails.Intralinks[2].USERNAME,
            intraPassword: FirmDetails.Intralinks[2].PASSWORD
        });
        this.frmFirm.setControl('intraLinks', this._fb.array([intraLinksGroup]));
    }


    getFirmDetails() {
        if (this.FirmId != null) {
            this.firmService.getFirmDetails(this.FirmId)
                .subscribe(data => {
                    this.FirmDetails = data;
                    this.setFormValues(this.FirmDetails);
                },
                    err => {
                        this.Error = 'An error has occurred. Please contact BSG';
                    },
                    () => {
                    });
        }
    }

    get dateFoundedDate(): string {
        const dateString = this.FirmDetails.Firm.DATE_FOUNDED;
        const results =parseInt(dateString.replace(/\/Date\(([0-9]+)[^+]\//i, "$1"));
        const date = new Date(results);
        const month = date.toLocaleString('en-us', { month: 'long' });
        return (month  + '-' + date.getFullYear());
    }

    private getDate(dateFounded: string): Date {
        const results =parseInt(dateFounded.replace(/\/Date\(([0-9]+)[^+]\//i, "$1"));
        const date = new Date(results);
        return new Date (date.getFullYear() + '-'  + (date.getMonth() + 1) + '-' + date.getDate());
    }

    saveManager() {
        this.firmService.createFirm(this.FirmDetails)
            .subscribe(data => {
                this.getFirmDetails();
                this.EditMode = !this.EditMode;
            },
                err => {
                    this.Error = 'An error has occurred. Please contact BSG';
                },
                () => {
                });
    }

    dateFoundedChanged(dateFoundedDate: Date) {
        this.DateFoundedDate = dateFoundedDate;
    }
}

Answer 1

您可以像这样使用 patchValue 绑定值数组，

setFormValues(FirmDetails: any) {
            this.frmFirm.patchValue({
                firmName: FirmDetails.Firm.NAME,
                shortName: FirmDetails.Firm.SHORT_NAME,
                alternateName: FirmDetails.Firm.ALTERNATE_NAME,
                dateFounded: FirmDetails.Firm.DATE_FOUNDED,
                firmHistory: FirmDetails.Firm.HISTORY_HTML,
                People: FirmDetails.People,
                websites: FirmDetails.Websites
            });
    }

因为FirmDetails.Websites值是一个数组，如果您喜欢上面的方法，该值将被绑定

首先，您必须调用initializeFormModel()函数，然后您必须在getFirmDetails()中调用ngOnInit()函数首先要初始化表格，然后绑定值。

patchValue 也可以用于表单数组

绑定数据以形成角度数组

1 个答案: