Angular2中的反应式FormsModule [英] Reactive FormsModule in Angular2
问题描述
我尝试使用ReactiveFormsModule时在我的项目中添加FormsArray,但是我收到错误,并且显示为:-
I tried to Add FormsArray in my Project while using ReactiveFormsModule but i am receiving the error and it is displayed as :-
找不到具有未指定名称属性的控件. 而且我们也不能通过使用模板驱动的表单来添加FormsArray吗?
Cannot find control with unspecified name attribute. and also can't we add FormsArray by using template driven form ?
下面是我的代码.
recipe-edit.component.ts
recipe-edit.component.ts
<div class="row">
<div class="col-xs-12">
<form [formGroup]="recipeform" (ngSubmit)="onsubmit()" #f="ngForm">
<div class="row">
<div class="col-xs-12">
<button
type="submit"
class="btn btn-success"
>Save</button>
<button type="button" class="btn btn-danger" >Cancel</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="name">Name</label>
<input
type="text"
id="name"
formControlName="name"
class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="imagePath">Image URL</label>
<input
type="text"
id="imagePath"
formControlName="image"
class="form-control"
>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12" >
<img class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="description">Description</label>
<textarea
type="text"
id="description"
class="form-control"
formControlName="description"
rows="6"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12" >
<div
class="row"
formArrayName="ingredients"
*ngFor="let ctrl of recipeform.get('ingredients').controls;let i=index"
[formGroupName]="i"
style="margin-top: 10px;">
<div class="col-xs-8">
<input
type="text"
formControlName="name"
class="form-control"
>
</div>
<div class="col-xs-2">
<input
type="number"
class="form-control"
formControlName="amount"
>
</div>
<div class="col-xs-2">
<button
type="button"
class="btn btn-danger"
>X</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<button
type="button"
class="btn btn-success"
>Add Ingredient</button>
</div>
</div>
</div>
</div>
</form>
recipe-edit.component.ts
recipe-edit.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import {NgForm, FormGroup, FormControl, FormArray} from
'@angular/forms';
import { Recipeservice } from '../recipe.service';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-recipe-edit',
templateUrl: './recipe-edit.component.html',
styleUrls: ['./recipe-edit.component.css']
})
export class RecipeEditComponent implements OnInit {
@ViewChild('f') recipeform:FormGroup
id:number
editmode=false
constructor(private reservice:Recipeservice,private
route:ActivatedRoute,router:Router) { }
ngOnInit() {
this.route.params.subscribe(
(params)=>{
this.id=+params['id']
console.log(this.id)
this.initform()
}
)
}
onsubmit(){
console.log(this.recipeform)
}
private initform(){
let recipename=''
let recipeimage=''
let recipedescription=''
let recipeingredients=new FormArray([])
this.editmode=true
if(this.editmode){
const recipe=this.reservice.getrecipe(this.id)
recipename=recipe.name
recipeimage=recipe.imagepath
recipedescription=recipe.description
if(recipe.ingredients!=null){
for(let ingredient of recipe.ingredients){
recipeingredients.push(new FormGroup({
'name':new FormControl(ingredient.name),
'amount':new FormControl(ingredient.amount)
}))
}
}
}
this.recipeform=new FormGroup({
'name':new FormControl(recipename),
'image':new FormControl(recipeimage),
'description':new FormControl(recipedescription),
'ingredients':recipeingredients
})
}
}
推荐答案
我完全同意 @DeborahK 在以前的 answer 中,您应该在使用反应式表单时遵循这些规则.
I totally agree with the recommendations made by @DeborahK in the previous answer and you should follow those while using Reactive forms.
但是,这些并不是您出错的原因.在HTML模板中,您的FormArray
控件层次结构错误.应该是FormArray-> FormGroup-> FormControl,像这样:
However, those are not the reason for your error. In your HTML template, you have a wrong hierarchy of your FormArray
control. It should be FormArray --> FormGroup --> FormControl, like this:
<div class="row"
formArrayName="ingredients"
*ngFor="let ctrl of recipeform.get('ingredients').controls;let i=index"
style="margin-top: 10px;">
<div [formGroupName]="i">
<div class="col-xs-8">
<input type="text"
formControlName="name"
class="form-control">
</div>
<div class="col-xs-2">
<input type="number"
class="form-control"
formControlName="amount">
</div>
<div class="col-xs-2">
<button type="button"
class="btn btn-danger">
X
</button>
</div>
</div>
</div>
如您所见,我已经将 name 和 amount 控件包装在div
中,并将[formGroupName]
移到了该包装div中.我没有测试代码,但是它可以解决您的问题.
As you can see, I have wrapped the name and amount control within a div
and moved the [formGroupName]
to this wrapper div. I didn't test the code but it should solve your problem.
这篇关于Angular2中的反应式FormsModule的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!