动态表单在角度2中给出构建错误

问题描述 投票：1回答：1

我已经在角度2中创建了动态表单。它在本地工作正常，但是当我尝试使用ng build --prod构建我的项目时，它给出了以下错误

“FormGroup”类型的参数不能分配给“Customer”类型的参数。 “FormGroup”类型中缺少属性“地址”。 “AbstractControl”类型中不存在属性“控件”。

以下是我的代码方法

 <form [formGroup]="myForm" (ngSubmit)="save(myForm)">            
         <!--addresses-->
         <div formArrayName="addresses">
             <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">
                 <div class="panel-heading">

                     <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)"></span>
                 </div>
                 <div class="panel-body" [formGroupName]="i">
                     <passengers [group]="myForm.controls.addresses.controls[i]"></passengers>
                 </div>
             </div>
         </div>          
         <div class="pay-ticket">
             <h3 class="title-border">Let’s pay for your ticket</h3>
         </div>
         <div class="book-btn">

             <button type="submit" class="blue-btn" >Great! Lets book this</button>
         </div>
         <div class="clearfix"></div>           
     </form>

以下是ts文件

ngOnInit() {
    this.myForm = this._fb.group({
        //name: ['', [Validators.required, Validators.minLength(5)]],
        addresses: this._fb.array([])
    });
    }
      initAddress(Type: string) {
    return this._fb.group({
        Title: [''],
        FirstName: [''],
        LastName: [''],
        DOBday: [''],
        DOBmonth: [''],
        DOByear: [''],
        Email: [''],
        MobileNo: [''],
        CountryCode: [''],
        Type: Type

    });
}
addAddress(type: string) {

    try {
        const control = <FormArray>this.myForm.controls['addresses'];
        const addrCtrl = this.initAddress(type);

        control.push(addrCtrl);

        /* subscribe to individual address value changes */
        // addrCtrl.valueChanges.subscribe(x => {
        //   console.log(x);
        // })
    }
    catch (ex)
    { }
}

removeAddress(i: number) {
    const control = <FormArray>this.myForm.controls['addresses'];
    control.removeAt(i);
}

界面如下

export interface Customer 
{
//name: string;
addresses: Address[];
}
export interface Address 
{
Title?: any;
FirstName?: any;
LastName?: any;
DOBday?: string;
DOBmonth?: string;
DOByear?: string;
Email?: any;
MobileNo?: any;
CountryCode?: any;
Type?:any;
}

最后是以另一种形式呈现的单独的html文件

<div class="whoTravelling">
<div class="traveler-form">
    <div class="row" [formGroup]="adressForm">
        <div class="kendo-combo title-class col-4">
            <div class="full-c">
                <label style="font-size:larger" ><b>{{ adressForm.get('Type').value }}</b></label>
                <label class="search-label">Title</label>
                <div class="no-mar-left list-dropdown">
                    <div class="col-12" style="padding-left: 0px; padding-right: 0;">
                        <kendo-dropdownlist formControlName="Title" [data]='[{text: " Mr", value: 1},{text: "Mrs", value: 2},{text: "Miss", value: 3}]'
                                            [textField]="'text'" [valueField]="'value'" [valuePrimitive]="true" >
                        </kendo-dropdownlist>
                    </div>
                </div>
            </div> 
        </div>
        <div class="kendo-combo title-class col-4">
            <div class="full-c">
                <label class="search-label">First Name</label>
                <div class="no-mar-left list-dropdown">

                    <div class="col-12 form-grp" style="padding-left: 0px; padding-right: 0;">
                        <input type="text"  formControlName="FirstName" class="input-box" placeholder="As in passport / ID" />
                    </div>
                </div>
            </div>
        </div>
        <div class="kendo-combo title-class col-4">
            <div class="full-c">
                <label class="search-label">Last Name</label>
                <div class="no-mar-left list-dropdown">
                    <div class="col-12 form-grp" style="padding-left: 0px; padding-right: 0;">
                        <input type="text"  formControlName="LastName" class="input-box" placeholder="As in passport / ID" />
                    </div>
                </div>
            </div> 
        </div>
        <div class="kendo-combo title-class col-4">
            <div class="full-c">
                <label class="search-label">Date of Birth</label>
                <div class="no-mar-left list-dropdown">
                    <div class="col-12" style="padding-left: 0px; padding-right: 0;">
                        <div class="row">
                            <div class="col-4 no-pad">
                                <kendo-dropdownlist  formControlName="DOBday" [data]='[{text: " 1", value: 1},{text: "2", value: 2},{text: "3", value: 3},{text: "4", value: 4}]'
                                                    [textField]="'text'" [valueField]="'value'" [valuePrimitive]="true">
                                </kendo-dropdownlist>
                            </div>
                            <div class="col-4 no-pad">
                                <kendo-dropdownlist  formControlName="DOBmonth" [data]='[{text: " jan", value: 1},{text: "feb", value: 2},{text: "mar", value: 3},{text: "apr", value: 4}]'
                                                    [textField]="'text'" [valueField]="'value'" [valuePrimitive]="true">
                                </kendo-dropdownlist>
                            </div>
                            <div class="col-4 no-pad">
                                <kendo-dropdownlist  formControlName="DOByear" [data]='[{text: " 1980", value: 1},{text: "1981", value: 2},{text: "1982", value: 3},{text: "1983", value: 4}]'
                                                    [textField]="'text'" [valueField]="'value'" [valuePrimitive]="true">
                                </kendo-dropdownlist>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
        <div class="kendo-combo title-class col-4">
            <div class="full-c">
                <label class="search-label">Email Address</label>
                <div class="no-mar-left list-dropdown">

                    <div class="col-12 form-grp" style="padding-left: 0px; padding-right: 0;">
                        <input type="text" formControlName="Email" class="input-box" placeholder="So we can send your confirmation" />
                    </div>
                </div>
            </div> 
        </div>
        <div class="kendo-combo title-class col-4">
            <div class="full-c">
                <label class="search-label">Mobile Number</label>
                <div class="no-mar-left list-dropdown">
                    <div class="col-12 form-grp" style="padding-left:70px; padding-right: 0;">
                        <input type="text" formControlName="CountryCode" placeholder="+91" class="country-code input-box" /><input type="text" formControlName="MobileNo" class="input-box mb-number" placeholder="In case we need to reach you" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

请帮忙

javascript angular angular-reactive-forms formgroups
1个回答
0
投票

看看这个https://github.com/angular/angular-cli/issues/6099

我也面临这个问题通过以下方式解决了它

试试这个

在你的ts文件中

get formData() { return <FormArray>this.myForm.get('addresses'); }

在你的HTML中

<div *ngFor="let address of formdata.controls; let i=index" class="panel panel-default">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.