Angular dynamic crud

0

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?

    
asked by Kevin AB 18.06.2017 в 00:29
source

1 answer

0

The ngModel of each input is doing the dual binding with the property op.nameModel.name as you specified, if the idea is to use the value containing op.nameModel.name (for example model.name ) then you could try change the expression of ngModel to point to a property of model :

<input type="text" [(ngModel)]="model[op.nameModel.name2]"  class="form-control" id="{{op.nameForm}}" placeholder="{{op.nameForm}}"
      name="{{op.nameModel.name2}}">

Although model and model2 obviously refer to the same object.

    
answered by 18.06.2017 в 01:17