J'essaie d'obtenir une valeur d'un groupe de formes angulaires.
Lorsque j'utilise J'utilise [formontrol] car je dois avoir une autocomplete pour le champ de saisie. Voici mon code p> HTML STRY>: P> formontrolname code> Je peux obtenir la valeur mais lorsque j'utilise
[formontrol] code> Je ne suis pas capable de lire la valeur. P>
export class TransactionSearchComponent implements OnInit{
constructor(private fb:FormBuilder,private transactionService:TransactionService, private LoginvalidationService:LoginvalidationService, private ExcelService:ExcelService){ }
searchForm:FormGroup;
Client = new FormControl();
ngOnInit(): void {
this.searchForm=this.fb.group({
client:[''],
})
this.clientfilteredOptions = this.Client.valueChanges
.pipe(
startWith(''),
map(value => this._Clientsfilter(value))
);
}
private _Clientsfilter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.clients.filter(option => option.toLowerCase().includes(filterValue));
}
searchTransaction(){
console.log(this.searchForm.get('client').value);
}
4 Réponses :
Veuillez vérifier la capitalisation dans HTML Client CODE> VS Usage
Client CODE> P>
Non même après avoir changé la capitalisation, il n'a pas fonctionné
Je suggérerais au lieu d'utiliser * NGIF tout en travaillant avec le groupe de formulaires Utilisez ngstyle ou ngclass ou [caché] avec la liaison de la propriété.
* Raison Derrière ForControlName ne fonctionne pas avec NGIF - NGIF Enlève complètement ou Ajoute du bloc de HTML C'est pourquoi la variable n'est pas accessible en dehors de NGIF. em> stry> p> ci-dessous est le code de travail avec formontrolname avec Attribut caché, P> .commonent.html strong> p> ou p> ou p> app.component.ts strong> p> importer {composant} de "@ angulaire / noyau"; p>
Dans le cas où, vous devez ajouter le Il existe deux manières, P> formontrol code> dans
fromgroup code>
searchTransaction(){
this.searchForm.addControl('client',this.client);
console.log(this.searchForm.value);
}
Vous n'avez pas besoin de définir le contrôle de formulaire comme celui-ci:
formControlName="client" // small one
Remplacer ceci.form code> avec
this.searchForm code> lil typo