J'essaie de créer un formulaire dynamique (afin que vous puissiez ajouter des éléments à une liste sans limites), mais le contenu de ma liste ne reçoit pas d'envoi car il ne trouve pas le contrôle avec chemin:
Impossible de trouver le contrôle avec le chemin: 'list_items -> list_item'
Mon composant:
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
listForm: FormGroup;
constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder,
private listService: ListService) {
this.listForm = this.fb.group({
title: ['', [Validators.required, Validators.minLength(5)]],
list_items: this.fb.array([
this.initListItem(),
])
});
}
initListItem() {
return this.fb.group({
list_item: ['']
});
}
initListItemType() {
return this.fb.group({
list_item_type: ['']
});
}
addListItem() {
const control = <FormArray>this.listForm.controls['list_items'];
control.Push(this.initListItem());
}
Le modèle (list.component.html):
<h2>Add List </h2>
<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">
<div class="form-group">
<input type="text" class="form-control" formControlName="title" placeholder="Title">
</div>
<div formArrayName="list_items">
<div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">
{{i + 1}}.) <input type="text" formControlName="list_item" placeholder="List Item" class="form-control">
</div>
<a (click)="addListItem()">Add List Item +</a>
</div>
<button type="submit">Submit</button>
</form>
Le titre fonctionne très bien, mais je ne trouve pas l'erreur que j'ai avec "formControlName", qui est à l'origine de l'erreur.
Merci d'avance pour toute aide dans ce problème.
Mise à jour avec ce que j'ai changé List.component.html
<h2>Add List </h2>
<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">
<div class="form-group">
<input type="text" class="form-control" formControlName="title" placeholder="Title">
</div>
<div formArrayName="list_items">
<div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">
{{i + 1}}.) <input type="text" formControlName="{{i}}" placeholder="List Item" class="form-control">
</div>
<a (click)="addListItem()">Add List Item +</a>
</div>
<button type="submit">Submit</button>
</form>
Et dans mon composant, j'ai changé le constructeur et ma méthode addListItem:
listForm: FormGroup;
constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder,
private listService: ListService) {
this.listForm = this.fb.group({
title: ['', [Validators.required, Validators.minLength(5)]],
list_items: this.fb.array([
[''],
])
});
}
addListItem() {
const control = <FormArray>this.listForm.controls['list_items'];
control.Push(this.fb.control(['']));
console.log(control)
}
Il devrait y avoir mappé formControlName sous forme HTML et votre fichier de composant.
<div *ngFor="let list_item of [0,1,2]; let i=index" class="panel panel-default">
{{i + 1}}.) <input type="text" formControlName='{{i}}' placeholder="List Item" class="form-control">
</div>
============
list_items: this.fb.array([
[''], //0 points to this
[''], //1 points to this
[''] //2 points to this
])
J'ai aussi rencontré cette erreur et j'ai résolu ce problème en lançant les variables de classe (éléments dans this.fb.array([])
).
Extrait de code
mobileNumbers: this.fb.array([this.fb.group(new MobileNumber('IN'))]),
Où class MobileNumber est utilisé.
export class MobileNumber{
public country_code: string;
public mobile_number: string;
constructor($cc){
this.country_code = COUNTRY_CODES[$cc];
}
}
À
export class MobileNumber{
public country_code = '';
public mobile_number = '';
constructor($cc){
this.country_code = COUNTRY_CODES[$cc];
}
}
Notez que si votre FormArray
contient d'autres contrôles FormGroup
(qui contiennent d'autres instances de FormControl
), vous devrez le faire pour accéder aux contrôles de chaque FormGroup
:
<div *ngFor="let item of myFormArray.controls; let i=index">
<div formGroupName="{{i}}">
<input formControlName="myFormGroupSubControl1" />
<input formControlName="myFormGroupSubControl2" />