last day (16 days later) » 

5:46 PM
1
A: FormArray - How to pass a string array to it?

Ajay OjhaI have created a sample application on stackblitz for adding array value in the options array. I would suggest instead of creating FormArray of options field try to create FormControl. I have changed the code of creating FormGroup. Here is the code of formgroup. this.productGroup = this.fb.gr...

 
Thank you! I've used a similar approach to save an array of images, but I wasn't sure if it would be possible to apply it dinamically.
Is it possible to store options in a array of objects instead of array: this.productGroup = this.fb.group({ name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])], variants: this.fb.array([ this.fb.group({ type: '', options: this.fb.array([ this.fb.group({ option: '', photos: '' ]) }) ]) });
 
Yes it is possible, do you need me to design?
 
Yes... I'm doing something wrong it's always returning an array
 
Provide the stackbliz link I will do the change and let you know
 
here: link ... It's your Stackblitz with the desired change... chips needs to be inside option
 
5:46 PM
now chips are adding inside the option; check on this: stackblitz.com/edit/… ; what about remove?
 
Almost there... I'm trying to use a new object instead of a new element of the array "variants": [ { "options": [ { "option": "chip0", "photos": "" }, {"option": "chip1", photos: '' }... ] ]
 
for using option values like an array in the template it must be something like this: let opt of this.productGroup.value.variants[i].options.value?
 
Yes, in *ngFor loop, put *ngIf before this otherwise it will give error.
 
I can't do this because its a mat-form-field... i need to initialize it somehow
 
5:46 PM
you can put '?' to handle null object.
 
I'm using <div formArrayName="variants" *ngFor="let item of productGroup.controls['variants'].controls; let i = index;"> <div [formGroupName]="i"> <input formControlName="name"> //options needs to be here </div> </div> for my dynamic fields. Should I keep this structure for options?
 
do you want to show options array value in the htmlcontrol or show as text?
 
mat-chip needs an array <mat-chip *ngFor="let opt of item">. But i'm generating objects instead of just an array, maybe it's better to keep an variable to handle it. However I can't populate this array when I receive the whole product from database. Could you help me to populate this 'control array´ that will be used in the mat-chip?
item should be [ [ 'chip0', 'chip1'], ['chip2' ... ] ]
 
can you please write your html in the stackblitz example and share it with me. I will do the correction as expected.
 
there you go: link ... I need to prepopulate the FormGroup (mat-chips too) and fix this `typesOptionsArray´ to work properly (sometimes it removes the wrong index)
 
5:46 PM
Ok will update you after 20 min
 
ok updated it with the my edit method too
sorry forgot about the upload service... now its uploading too
 
what is the use of upload service?
 
im passing the images from user file input to url[][] and files[][] arrays.
 
why you are binding 'let opt of typesOptionsArray' this in the html, why not you are binding options which you already have?
i believe typesOptionsArray item will be pushed when user click on add button
I have created a FormGroup
check on the above url
 
Can you bind to the database objects directly? I'm using typesOptionsArray because it seems easier to manipulate using arrays
even the material docs do this way
but i need to populate typesOptionArray on edit
it needs to be loaded with the other fields
 
6:00 PM
I have generated the formgroup based on database object.
which contains options as FormArray
are you saying all options should be in typesOptionsArray?
 
The logic is: everytime a option is added to typesOptionsArray, a new object is pushed {option: 'x', photos: 'xx'} to the mat-chip
 
ok, then what about those options which is coming from the server?
 
those options are like that when i'm saving the product, they are with type
so i have a reference
its easy to post a code here? so you can see how the object is made
add() =>
this.typesOptionsArray[index].push(value.trim());
const variants = <FormArray>this.productGroup.controls.variants;
const variantFormGroup = <FormGroup>variants.controls[index];
let optionValue = variantFormGroup.controls.options.value;
if (!optionValue) { optionValue = []; }
optionValue.push({option: value, photos: []});
variantFormGroup.controls.options.setValue(optionValue);
}
this last step to set the value needs to be done
typesOptionsArray its just a visual thing for the chips
 
let me conclude what I have understand : you have two rows of name like 'Jersey Lamar Jackson 18/19 Home' and in this object there are variants. every variants contains options. user can add more options in respective variants.
right?
 
6:17 PM
product = name field, variants array with type and options array. user can add new variants which works fine... its the original dynamic logic
options used to work fine when i could add just an array ['m', 'g', ... ]
but now the option 'm' (first position) gonna have photos string array inside
[ type: 'size', options: { option: 'm', photos: 'photo1, photo2', option: 'g' } ]...
 
{"_id":"5beb3c501dfae84c10d07b26","option":"Preto","photos":"https://localhost:4‌​000/images/product/var_1542143056216_crow.jpg,localhost:4000/images/product/var_1542143056216_flacco.jpg";}
you are talking about this, inside the options
photos is string not string array you are returning
 
yes i need to be a string array so i can pass it to this.urls
this.urls will load the images in the html
 
instead of returning string value try to return string array from server of photos property
 
if (this.files) {
this.files.forEach((fileArray, index) => {
fileArray.forEach(file => {
const timestamp = moment();
variantFormGroup.value.options[index].photos.push(`${environment.apiUrl}/images/product/var_${timestamp}_${file.name}`);
variantData.append('photos', file, `var_${timestamp}_${file.name}`);
});
});
}
this push didn't worked well
const variants = <FormArray>this.productGroup.controls.variants;
const variantFormGroup = <FormGroup>variants.controls[0];
 
definitely this will not work, because photos is string
 
6:29 PM
i see, so just need to make it a array before the loop
 
give me 5 min
will change and let you know
 
6:50 PM
convertPhotosArray(){
let variants = this.productGroup.controls.variants as FormArray;
variants.controls.forEach((t:FormGroup)=>{
let options = t.controls.options as FormArray;
options.controls.forEach((option:FormGroup)=>{
let photos = option.value.photos;
if(photos){
let splitPhoto = photos.split(',');
if(splitPhoto.length > 0){
option.controls.photos.setValue(splitPhoto);
}
}
})
})
}
I have called 'convertPhotosArray' method once the formgroup is generated
this.productGroup = this.fb.group(serverData);
this.convertPhotosArray()
now you can push the images
because i converted photos string to string array
 
holy cow, gonna add this method here
while i do it.. have you found a way to populate that typesOptionsArray with database option?
 
means every database option should be pushed in typesOptionsArray?
 
yeah but i need to be cautious with the index
it seems safer to use [ ['opt1', 'opt2'], ['opt3'] ]
so i dont risk to delete a wrong type
 
database option are variants >> options >> option?
 
yes
im going to be offline for a while (like a hour)
 
7:06 PM
check on stackblitz
i have print typesOptionsArray
Vou para a cama (I am going to bed now)
I am going to bed now, it's 1:00 AM here
if there is any issue just post message here
I will reply once i wake up after 5 hour
*awake
 
 
1 hour later…
8:34 PM
No problem... I will check the code now
 
8:53 PM
" this.typesOptionsArray[index].push is not a function "
 
 
1 hour later…
10:19 PM
okay finally did it
edit(product: Product) {
this.isLoading = true;
if (product.variants.length) {
const variants = <FormArray>this.productGroup.controls.variants;
variants.removeAt(0);
product.variants.forEach((variant, i) => {
variants.push(this.fb.group({ type: variant.type, options: variant.options }));
variant.options.forEach((opt) => {
this.typesOptionsArray[i].push(opt.option);
});
});
}
this.productGroup.patchValue({ .. }) }
do you know portuguese (brazil)? if so its my native language
 

  last day (16 days later) »