Ufdjrw

I'm looking to isolate model validation within the model class itself, without having to hard-code required states (our designer guys don't know what is required, just that they need to hook up properties). I'm trying the property decorator path without much luck. The constructor overwrites what the decorator sets. Is this even possible, should I go about it another way?

model.ts

@Required
name: string;

hobbies: string;

constructor(dto?: any) 
 this.name = dto.name; // This clears my "required" property
 this.hobbies = dto.hobbies;

decorator.ts

function Required(target: any, key: string) 
 Object.defineProperty(target, "required", value: true );

What I am hoping to accomplish...

*.html

<input name="name" [(ngModel)]="model.name" [required]="model.name.hasOwnProperty('required')">

I've also tried playing with the String prototype itself to initialize this property, but the constructor still clears anything that gets set.

String.prototype["required"] = false;

You can't hold extra information in the property like that. A property when assigned will be replaced by the new value, nothing of what you assign not the prototype of the class (and target is the prototype not an instance of the class) will be accessible once you assign a new value.

A solution would be to add an extra property, lets call it meta which could hold this metadata (and other property metadata as needed). You can even type it correctly using mapped types. This solution is pretty close to your desired outcome:

class Model 
 readonly meta!: Metadata<Model>
 @Required
 name: string;

 hobbies: string;

 constructor(dto?: any) 
 this.name = dto.name; // This clears my "required" property
 this.hobbies = dto.hobbies;
 

type Metadata<T> = Partial<Record<keyof T, PropertyMetadata>>
type PropertyMetadata = 
 required?: boolean

function Required<T extends meta: Metadata<T> , TKey extends keyof T>(target: T, key: TKey) (target.meta = );
 let propMeta = meta[key] 

console.log(new Model().meta.name!.required);

Note that meta can be undefined if you don't have any metadata. And the metadata for a property could likewise be undefined so in the angular template you should access it using ?: model.meta?.name?.required. You could also do some fancier stuff assigning a Proxy instead of to meta but I went the simple route here.