final thistle
Hello, Im dealing with problem with radio buttons. Radio buttons after patching right value (object) do not set right value.
In picture for example regVariant and attenderType has own types.
Can anyone explain why it doesnt work?
Data are not undefined... thats why I console.log them just before they are patched and they come out nicely.
Thank you
dapper beacon
g!badeyes @final thistle I cannot easily copy and paste text from an image
lofty zodiacBOT
@final thistle Please do not post pictures of code (especially photos of a physical screen) as they are difficult to read and difficult to correct (as you cannot copy code from a screenshot to modify it).
final thistle
attenderModel = new FormGroup({
name: new FormControl<string>('', {nonNullable: true, validators: Validators.required}),
surname: new FormControl<string>('', {nonNullable: true, validators: Validators.required}),
email: new FormControl<string>('', {nonNullable: true, validators: [Validators.required, Validators.email,
Validators.pattern("^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9.-]+.[a-z]{2,}$")]}),
organization: new FormControl<string>('', {nonNullable: true, validators: Validators.required}),
address: new FormControl<string>('', {nonNullable: true, validators: Validators.required}),
ico: new FormControl<string>(''),
dic: new FormControl<string>(''),
attenderType: new FormControl<TypCloveka | null>(null, Validators.required),
regVariant: new FormControl<VariantRegistracie | null>(null, Validators.required),
workshop: new FormControl<Workshop | null>(null),
paymentMethod: new FormControl<string>('', {nonNullable: true, validators: Validators.required}),
extraOptions: new FormArray([]),
notes: new FormControl<string>('',{nonNullable: true})
});
patchForm(): void {
console.log("-----")
console.log(this.idTypeCloveka)
console.log(this.tricko)
console.log(this.variantReg)
console.log(this.workshop)
console.log(this.paymentType)
this.attenderModel.patchValue({
//attender Model
name: this.registration?.registracia?.meno,
surname: this.registration?.registracia?.priezvisko,
email: this.registration?.registracia?.email,
organization: this.registration?.registracia?.organizacia,
address: this.registration?.registracia?.adresa,
ico: this.registration?.registracia?.ico,
dic: this.registration?.registracia?.dic,
attenderType: this.idTypeCloveka,
regVariant: this.variantReg,
workshop: this.workshop,
paymentMethod: this.paymentType,
// extraOptions: 1;
notes: this.registration?.registracia?.poznamky
}
}
TypeCloveka is TypeOfPerson
dapper beacon
I mean what is that Type definition
final thistle
VariantRegistracie is VariantOfRegistration
Do you want see interface?
Sorry for not having it in English but my classmates did it all in our language before I came on this project
dapper beacon
sure... but one FormControl for an Object isn't really something it was going to work
final thistle
So Its not supposed to work like that?
Because sending data is working fine
just patching value fails
dapper beacon
Well lets focus on that first. But there isn't an HTML form field I know of that can do an Object. inputs do one string/number/date.
Where & when is patchForm() called?
final thistle
its called right after we get all data we need about registration
dapper beacon
Show code
final thistle
sec
private getTypeAttender() {
let idTyp: number = 0;
this.getMetadata().subscribe(metadata => {
if (metadata) {
this.metadata = metadata;
this.metadata.variantRegistracie.forEach((reg) => {
if (reg.idvariantu === this.registration?.registracia?.idVariant) {
console.log("-----")
this.variantReg = reg;
console.log("VARIANT REG ",this.variantReg);
this.metadata.workshop.forEach(workshop => {
if(workshop.idworkshop === this.registration?.registracia?.idworkshop) {
this.workshop = workshop;
console.log("WORKSHOP ", this.workshop);
}
})
idTyp = reg?.idtypCloveka!;
console.log("PAYMENT", this.paymentType);
}
})
this.metadata.typCloveka.forEach(clovek => {
if (clovek.idtypCloveka === idTyp) {
this.idTypeCloveka = clovek;
console.log("TYP CLOVEKA ",this.idTypeCloveka);
}
})
this.metadata.tricko.forEach(tricko => {
console.log(tricko)
console.log(tricko.idtricko)
console.log(this.registration?.registracia?.idtricko)
if (tricko.idtricko === this.registration?.registracia?.idtricko) {
this.tricko = tricko;
console.log("tricka")
console.log(tricko);
console.log("TRICKO ",this.tricko);
}
})
this.patchForm();
}
});
}
private getRegistration(id: number) {
this.adminService.getRegistrationById(id).subscribe({
next: (response) => {
this.registration = response;
this.doprovody = response.doprovod!;
if (this.registration?.registracia?.prevodom) this.paymentType = "BANK_TRANSFER";
if (this.registration?.registracia?.cash) this.paymentType = "CASH";
if (this.registration?.registracia?.kartou)this.paymentType = "CARD";
this.getTypeAttender();
},
error: (err => console.log(err))
})
}
ngOnInit(): void {
this.regId = Number(this.route.snapshot.paramMap.get('id'));
this.getRegistration(this.regId);
const lang = this.translate.currentLang;
this.locale = lang == 'en' ? 'en-gb' : lang;
this.dateAdapter.setLocale(this.locale);
this.initListeners();
this.activatedRoute.data.pipe(
switchMap(data => {
const konferencia = data['conf'] || this.conferenceService.conference;
this.konferencia = konferencia;
return this.conferenceService.getRegistrationMetadata(konferencia)
}),
tap(m => {
this.metadata = m;
this.initClovekTypesAndRegVariants();
this.initValidPayments();
}),
switchMap(() => this.userService.isLoggedIn()),
tap(isAdm => {
if (this.isAdmin !== isAdm) {
this.isAdmin = isAdm;
this.initClovekTypesAndRegVariants();
}
}),
catchError(err => {
console.error('Metadata for conference not available', err);
this.router.navigateByUrl("/");
return EMPTY;
})
).subscribe();
// this.getMetadata();
}
With all of those .subscribe() 😭 in there I can only assume that you have a race condition. Better would be to use AsyncPipe and combining/merging/concatenating your Observables.
This also looks like way too much code for one Component. You should put the code that does things into a Service. Components are to create DOM and attach Services to it.
final thistle
Sadly, majority of this code isnt mine... but our profesor...
If I was doing all this, i would do it in different way but... I cant now
But, you told me, that main problem is FormControl cannot take object.. so If data flow is working fine, and I got all needed data.. It shouldnt be a code error, right?
dapper beacon
I don't think that is the main problem.
FormControl can 100% use an Object as a value.
HTML cannot use an Object as a value (kinda sort of)
final thistle
hmmm so why than its not patching :/