How to send an array with ngmodel

Asked

Viewed 458 times

-1

I am redoing a project now in angular, and to get an array of the form I used getlist and Prod[] and Qtd[] inside the tag form, now in angular use ngmodel and not the form itself, how can I take this data and send in the back in array form, by ngModel? 

<div>
<div class="row justify-content-around col-md-12">
<select class="form-control col-md-5 produtos" name="prod[]">
<option value="1">TST-01 - </option>
<option value="2">TST-02 - </option>
<option value="3">TST-02 - Teste-02</option>
</select>
<div class="col-md-7">
<button class="btn btn-danger btn-sm" type="button"><i class="fas fa-trash-alt"></i></button>
</div>
</div>
<input class="form-control col-md-2 mt-1 quantidade" min="0" max="999" type="number" name="qtd[]" placeholder=" Qtd">
<br>
</div>

ngModel 

produto = { produto_desc: '', codigo: "", tipo: "", valoruni: "", valoruniDol: "", quantidade: 0, qtdvalorTot: 0, Compvalortot: '', CompvalortotDol: '', prod: [], qtd: [] };
array angular django

  • You want to take the selected data within the option?

  • Or do you want to send from back and pick on select? using ngModel?

  • These inputs that I put are dynamic, when the guy clicka on the button appears another select for him to select another product and quantity, wanted to join this in an array or two one of products and another of quantities and send to the back, using ngModel

1 answer

1


When you’re making an angular form, the most common way of capturing this data and putting the values obtained by the form into an object, if you want to store multiple values, within any property of the object you can put an array, follows the example of how your form would look with the object.

Na View

<div>
<div class="row justify-content-around col-md-12">
<select class="form-control col-md-5 produtos" [(ngModel)]="form.produto_selecionado">
<option value="{{prod.id}}" *ngFor="let prod of form.produtos">{{prod.nome_produto}}</option>
</select>
<div class="col-md-7">
<button class="btn btn-danger btn-sm" type="button"><i class="fas fa-trash-alt"></i></button>
</div>
</div>
<input class="form-control col-md-2 mt-1 quantidade" min="0" max="999" type="number" [(ngModel)]="form.qtde_produto" placeholder=" Qtd">
<br>
</div>
<button class="btn btn-danger btn-sm" type="button" (click)="enviar(form)"></button>

Na Controller

export class Produtos implements OnInit {
    form: any = {};
    constructor() {
        this.form.qtde = 1;
        this.form.produtos = [
            {
                id: 1,
                nome_produto: 'produto 1'
            },
            {
                id: 2,
                nome_produto: 'produto 2'
            },
            {
                id: 3,
                nome_produto: 'produto 3'
            },
        ];
    }

    ngOnInit() {
    }
    enviar(produto) {
        console.log(produto);
    }
}

At the end when you click the submit button you will have the form object completed to treat as you wish. Abracos

Browser other questions tagged array angular django

You are not signed in. Login or sign up in order to post.