I am creating a dynamic crud, which allows me to pass as parameters the elements that will be displayed in a table for any type of crud (users, categories, permissions, etc.) Then, depending on the type of crud, the corresponding options (the models for the form, as well as the type and name)
import { Component,Input,OnInit } from '@angular/core';
import { CrudFactoryService } from '../../services';
interface Hero {
name?:String;
userName?:String,
email?:String,
age?:String,
password?:String
}
@Component({
selector:'crud',
templateUrl:'crud.component.html',
})
export class CrudComponent implements OnInit{
@Input() items;
@Input() type:string;
model:Hero={};
options:any;
constructor(private cfs:CrudFactoryService){
}
ngOnInit(){
console.log("type=="+this.type);
this.options=this.cfs.getOptions(this.type);
}
create(model2){
console.log("model2==",model2)
console.log("model1==",this.model)
console.log("Create User pressed")
}
sendToUpdate(user){
}
}
The options that I bring to you through an api
export const CRUDUSER=[
{nameForm:"id"},
{nameForm:"Nombres",nameModel:{name:"model.name",name2:"name",type:"text"}},
{nameForm:"Nick",nameModel:{name:"model.userName",name2:"userName",type:"text"}},
{nameForm:"Correo",nameModel:{name:"model.email",name2:"email",type:"email"}},
{nameForm:"Edad",nameModel:{name:"model.age",name2:"age",type:"number"}},
{nameForm:"Fecha Registro"},
{nameModel:{name:"model.password",name2:"password",type:"password"}}
]
When I run the application everything works fine except for one thing
That my ngModel is not updated when you entered a new value in the entry
When I change a value, the value of the link is changed to the value entered, user.name === fdfdf, I know it by data link, using only [] in the model yano I get this error, which seems strange No I saw this question
When I send submit invocation to the create () method, but it throws me that the previous user is empty
Here is my html where to link the data (options) brought from the api
......
......
......
<div class="form-group" *ngFor="let op of options |async,let i=index">
<ng-container *ngIf="op.nameModel">
<input type="text" [(ngModel)]="op.nameModel.name" class="form-control" id="{{op.nameForm}}" placeholder="{{op.nameForm}}"
name="{{op.nameModel.name2}}">
</ng-container>
</div>
<button type="submit" class="btn btn-default" (click)="create(model)" >Submit</button>
</form>
.....
....
My question is, how to solve this problem?