我已经在 Angular 2 中创建了动态表单。它在本地工作正常，但是当我尝试使用 ng build --prod 构建我的项目时，它给出了以下错误
Argument of type 'FormGroup' is not assignable to parameter of type 'Customer'. Property 'addresses' is missing in type 'FormGroup'.
Property 'controls' does not exist on type '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>
请帮忙
最佳答案
看看这个 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">
关于javascript - 动态形式给出 Angular 2 的构建误差，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47863667/