setAttribute将无法与ngModel一起使用

Question

i'm trying to auto assign ngModel while creating a html element This is my code,

productName.setAttribute('[(ngModel)]', `customProductName`);

But i keep getting this error,

Failed to execute 'setAttribute' on 'Element': '[(ngModel)]' is not a valid attribute name.

other html attributes work fine. Please how can i go about this, thank you.

Answer 1

I haven't set value of ngModel as you have done, but i could suggest, the simplest solution for setting custom model value is as below,

create a model interface like,

productModel.ts

export interface ProductModel {
    productName: string;
}

And in your template,

product.component.html

if it is input tag,

// other code form code here        

<input type="text" name="productName" id="productName" placeholder="Your productName" [(ngModel)]="model.productName">

// more code here

In component,

product.component.ts

// create an instance of ProductModel instance by name variable model
model: ProductModel = new ProductModel();

// set the product name with custom value as below on ngOninit fuction
ngOninit () {
    this.model.productName = 'Custom product Name';
}

Please let me know if this solution is useful or not.. thanks

Note: This is Template driven form example u can achieve this even with Reactive forms also