Angular Two-Way-Databind - Change Value

Question

I Have one Form with an input.

<form #modelContrato="ngForm" role="form" >
<input [(ngModel)]="modelContrato.numero" id="numero" class="form-control" name="numero" type="text" autocomplete="off" placeholder="Número Contrato"
                                        #numero="ngModel" required />

On my component.ts I have these lines.

@Input() modelContrato: Contrato;

On Constructor

this.modelContrato = {} as Contrato;

ngOnInit

this.modelContrato.numero = '10';

ps: Contrato is a model. Like This

export interface Contrato {
    id: string;
    contratoPrincipalId: string;
    numero: string;
}

Why my input not change de value passed in OnInit ?

What are you trying to do? – Pardeep Jain Apr 26 '18 at 12:31 — Pardeep Jain, Apr 26 '18 at 12:31

Daddelbob · Accepted Answer · 2018-04-26T12:39:11.927

1

Generic solution: work with @ViewChild to refer to an Element. https://angular.io/api/core/ViewChild

Your personal problem solution: just create a field in your component

const modelContrato: Contrato;

since the [(ngModel)]="modelContrato.numero" two-way binds to the modelContrato numero attribute to the input-element value

Why your Code wont work: you misstook the input Element to be bound to @input decorator. The @input Decorator is for passing properties from ancestor to successor Components. https://angular.io/guide/component-interaction

edited Apr 26 '18 at 12:39

answered Apr 26 '18 at 12:32

Daddelbob

406
4
13

Where do i put "const modelContrato: Contrato;" ? I have this interface declared OnInit. Do I need to change something in my html component ? – Guilherme Marques Apr 26 '18 at 13:00

Angular Two-Way-Databind - Change Value

1 Answers1