By having this, I have Empty expression is not allowed
and my Input@ value is any type just like the below
Anybody exprerienced this?
@Input() value: any;
<app-number-field [(value)]="data?.address?.latitude"></app-number-field>
#Empty Expression is not allowed for two way bindings
stuck bloom
stuck bloom
here is the reference thread
late gazelle
Try [value] instead of [(value)]
stuck bloom
hmm I need two way bindings. I can find a workaround if that's not allowed.
I ended up doing like
[value]="data?.physicalAddress?.latitude"
(valueChange)="
data?.physicalAddress?.latitude
? (data.physicalAddress.latitude = $event)
: null
queen flare
You cannot ask javascript to assign a value to a variable that could not exist.
And it makes sense.
Even your solution arise some questions about your design choice:
what's the initial value passed to value if data?.address?.latitude does not exist?
I'd suggest you to enable strict so the compiler will force you to write more robust code.
In the specific case, it will tell you to not use any and to initialize your properties.
stuck bloom
I agree. to use latitude, we need to initialise some nested properties in the first place. so I initialized when the outer most class is initialized.
so I can safely tell latitude would exist when the data class is initialized. The thing is as you suggested, how can we ignore this error by doing what?
I thought initantiating classes in the first place would prevent this already but still complaining about it 😦
queen flare
Is it latitude an object?
stuck bloom
I will show you the whole object
xport class Data (name is something else){
physicalAddress: AddressDto = new AddressDto({});
}
export class AddressDto{
latitude?: number;
constructor(data?: Partial<AddressDto>){
Object.assign(this, data);
}
}
when I get a data from ngrx store. get it like
this.data = {...data};
queen flare
What's this new trend of using class for modelling your entities?
stuck bloom
okay lol
new trend?
why do you think so
fill me up if I missed something wrong
if I have so many nested objects. How would you model your entities from the top most level
queen flare
export interface Data {
physicalAddress: AddressDto;
}
export interface AddressDto{
latitude?: number;
}
the thing is physicalAddress can be null from the backend. Then I want to initialize it in the frontend so I can save those values to the server
queen flare
If it comes null from API, you surely should not set an initial value in frontend.
Just make it nullable, and do the calculation to be assigned to the instance, not to the model.
export interface Data {
physicalAddress: AddressDto | null;
}
Back to your original problem, you could follow linked workaround posted by PeteBaconDarwin in that ticket
https://github.com/angular/angular/issues/42476#issuecomment-902785054
stuck bloom
right so I have a nested component dealing with that address called address component you mean I
@Input() physicalAddress: AddressDto = new AddressDto({});
queen flare
Why you absolutely need an empty AddressDto?
stuck bloom
otherwise latitude will be undefiend this.data?.physicalAddress.latitude
queen flare
But there's something in your logic that could turn latitude from null to a truthy value?
stuck bloom
yes when they type in the input element
First we need to show two input boxes two-way bound with this.data.address.latitude and this.data.address.longitude. Once they touched one of the input box which means we need to have instantiated class.
queen flare
Not sure without a repro, but maybe you could pass the entire this.data.address to the component, if it's the same one responsible of longitude and latitude