我试图迭代我的组件中的formArray但我得到以下错误
这是我的类文件中的逻辑
export class AreasFormComponent implements OnInit { public initialState: any; public areasForm: FormGroup; constructor(private fb: FormBuilder) { } private area(): any { return this.fb.group({ name: ['',[Validators.required]],latLong: ['',details: ['',[Validators.required]] }); } public ngOnInit(): void { this.areasForm = this.fb.group({ name: ['',areas: this.fb.array([this.area()]) }); } }
和我的模板文件
<form class="areas-form" [formGroup]="areasForm" (ngSubmit)="onSubmit(areasForm.values)"> <md-input-container class="full-width"> <input mdInput placeholder="Location Name" type="text" formControlName="name" required> <md-error *ngIf="areasForm.get('name').hasError('required')">Please enter the locationName</md-error> </md-input-container> <md-grid-list cols="1" [formArrayName]="areas"> <md-grid-tile formGroupName="i" colspan="1" rowHeight="62px" *ngFor="let area of areasForm.controls.areas.controls; let i = index "> <md-grid-list cols="3" rowHeight="60px"> <md-grid-tile colspan="1"> <md-input-container class="full-width"> <input mdInput placeholder="Area Name" type="text" formControlName="name" required> <md-error *ngIf="areasForm.get('areas').controls[i].name.hasError('required')">Please enter the area name</md-error> </md-input-container> </md-grid-tile> <md-grid-tile colspan="1"> <md-input-container class="full-width"> <input mdInput placeholder="details" type="text" formControlName="details" required> <md-error *ngIf="areasForm.get('areas').controls[i].name.hasError('required')">Please enter the locationName</md-error> </md-input-container> </md-grid-tile> <md-grid-tile colspan="1"> <button md-fab (click)="remove(i)"><md-icon>subtract</md-icon>Remove Area</button> </md-grid-tile> </md-grid-list> </md-grid-tile> </md-grid-list> <button type="submit" [disabled]="areasForm.invalid" md-raised-button color="primary">Submit</button> </form>
从中删除括号
[formArrayName]="areas"
并且仅使用
formArrayName="areas"
这个,因为[]你试图绑定一个变量,这不是。另请注意您的提交,它应该是:
(ngSubmit)="onSubmit(areasForm.value)"
而不是areasForm.values。
这是一个