J'ai une forme et il y a 5 champs. Il y a 2 champs qui utilisent <form [formGroup]="registrationFormGroup">
<input formControlName = "username" placeholder = "username"/><br/>
<input formControlName = "userlastname" placeholder = "userlastname"/><br/>
<p-calendar placeholder = "calendar1" formControlName = "calendar1"
hourFormat="24"></p-calendar><br/>
<input type = "text" formControlName = "hobby" placeholder = "hobby"/><br/>
<p-calendar placeholder="calendar2" formControlName = "calendar2"></p-calendar>
</form>
4 Réponses :
Si vous voulez seulement obtenir une valeur de ces formateurs et les ajoutez à un tableau, il vous suffit de le faire:
// your component and submit method
submitForm() {
this.myArray.push(this.registrationFormGroup.get('calendar1').value);
this.myArray.push(this.registrationFormGroup.get('calendar2').value);
}
Je veux obtenir les formes de forme actuels et les stocker à l'intérieur d'un tableau comme ceci: Laissez myarray = ["calendar1", "calendar2"]
Il n'y a pas de méthode de faire cela, si vous utilisez un backend, je vous ai recommandé d'ajouter des contrôles de manière dynamique avec ceci: this.form.addcontrol ("ControlName", [validateurs.required]) ou créez simplement un tableau avec le nom de commande dans votre composant et ajoutez-les lorsque vous créez votre formulaire. Ceci.registrationFormgroup = this.fb.group ({this.myarray [0], [validateurs.requiked]})
@Progx
Vous pouvez essayer ce qui suit, ce n'est pas une façon officielle de le faire, mais j'ai fouillé une solution. p>
Si vous avez le modèle suivant, vous devez essayer de correspondre à leur formulaire de formulaire Un identifiant. p> Cela vous permettra de interroger votre modèle et de procéder à ce qui suit dans votre composant. p> let calendarFields: Array<string> = [];
let form = document.querySelector('form');
for(let i = 0 ; i < form.childElementCount; i++) {
let child = form.children[i];
// check for a form child element with the local name of p-calendar
if(child.localName == 'p-calendar') {
// This id will be the same as your formControlName
calendarFields.push(child.id);
}
}
Vous pouvez lire le ellementef code> de tous les composants de calendrier utilisés et obtenez le formontrolname code> de celui-ci via getattribute () code>. import { Component, AfterViewInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { CalendarModule, Calendar } from 'primeng/primeng';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html'
})
export class CalendarComponent implements AfterViewInit
{
value: Date;
@ViewChildren(Calendar, { read: ElementRef })
public calendars: QueryList<ElementRef>;
public calendarNames: string[] = [];
constructor(private _fb: FormBuilder) {}
registrationFormGroup = this._fb.group({
username: [''],
userlastname: [''],
calendar1:[''],
hobby: [''],
calendar2:[''],
});
ngAfterViewInit()
{
this.calendarNames = this.calendars.map(({ nativeElement }) =>
{
return nativeElement.getAttribute('formControlname');
});
}
}
Y a-t-il une autre façon d'obtenir l'attribut FormControlName sans utiliser getattribute ()? Merci
Pas à ma connaissance, mais que voulez-vous dire par de manière angulaire , à l'aide de GetatTtribute sur un élément DOM est parfaitement bien.
Une question rapide. Pourquoi passez-vous {NAVELYEMENT} et non simplement NAVELEMENT DANS VOTRE FONCTION DE LA MAP? Est-ce une chose dossée? Pouvez-vous expliquer cela s'il vous plaît?
Qui s'appelle javascript Destructuration de l'objet , C'est un moyen net d'accéder aux propriétés de l'objet et d'utiliser directement des variables.
Donc, dans ce cas, vous l'avez utilisé pour accéder aux propriétés du natifelement?
Dans ce cas, il est utilisé pour accéder à la propriété natifelement de l'instance ellementRef .
Je ferais de cette façon, si vous dépendez-vous em> sur le nom FormControl, import { Component, OnInit } from '@angular/core';
import { CalendarModule } from 'primeng/primeng';
import { FormBuilder, FormGroup, FormControl, Validators } from "@angular/forms";
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html'
})
export class CalendarComponent implements OnInit {
value: Date;
constructor(private _fb: FormBuilder) { }
registrationFormGroup = this._fb.group({
username: [''],
userlastname: [''],
calendar1: [''],
hobby: [''],
calendar2: [''],
});
ngOnInit() {
var controls = Object.keys(this.registrationFormGroup.controls);
var calendarControlNames = controls.filter(x => {
return x.match(/calendar/);
})
console.log(calendarControlNames)
}
}
Le problème de cette solution est que le nom des formateurs ne sont pas toujours calendrier (j'ai plusieurs champs de calendrier et leurs noms de formulaire ne sont pas calendrier), donc je ne peux donc pas dépendre du retour X.Match (/ calendrier /); C'est pourquoi j'essaie de cibler les champs par le nom de balise p-calendar
Pas très clair ce que vous essayez d'atteindre ici.
J'ai une forme et il y a 5 champs. Il y a 2 champs utilisant p-calendrier. Je voudrais obtenir le formulaire de forme de ces champs. En mots simples, je veux stocker "calendrier1" et "calendar2" à l'intérieur d'un tableau.