I have created the dynamic form in angular 2. It is working fine locally but when i am trying to build my project using ng build --prod it is giving following errors
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'.
Following is my code apporach
<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>
following is the ts file
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);
}
Interface as follows
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;
}
And finally the separate html file which renders in another form
<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>
Please help
答案 0 :(得分：0)
看看这个https://github.com/angular/angular-cli/issues/6099
我也面临着通过跟随
解决问题的问题试试这个
你的ts文件中的
get formData() { return <FormArray>this.myForm.get('addresses'); }
<div *ngFor="let address of formdata.controls; let i=index" class="panel panel-default">