CODEWITHSUNDEEP
typescriptangular6
Aliasgher Nooruddin
Aliasgher Nooruddin

Reputation: 563

Input value not binding to ngmodel variable

I have an angular project I want to pass one of my input value to my typescript function but when I console.log It doesnt display updated value 

<div class="form-group">
<input type="number" [name]="'sec_chlng'" (click)="func()" 
 placeholder="Security Challenge: {{a}}+{{b}}" class="form-control form- 
 control-lg"  required></div>

Here`s my TS file

import { Component, OnInit } from '@angular/core';
import {Input} from '@angular/core';

import { ElementRef } from '@angular/core';

@Component({
  selector: 'angly-signUp',
  templateUrl: './signUp.component.html',
  styleUrls: ['./signUp.component.scss']
})




export class SignUpComponent implements OnInit {

  a = Math.floor(Math.random() * 10) + 1 ;
  b = Math.floor(Math.random() * 10) + 1 ;
  c = this.a + this.b;
  @Input() sec_chlng :any;

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit() {

  }

  func(){
    console.log(this.sec_chlng);
  }



}

How to update values

Upvotes: 0

Views: 953

Answers (1)

user6749601
user6749601

Reputation:

You have to use the ngModel-directive to achieve this. Whatsmore, do not react on (click) but on (change) as (change) gets fired after sec_chlng was changed whereas (click) is fired before. If (change) doesn't do the trick for you, please try (input).

<input type="number" [(ngModel)]="sec_chlng" (change)="func()" 
placeholder="Security Challenge: {{a}}+{{b}}" class="form-control form- 
control-lg"  required>

And do not use @Input. This has another purpose.

sec_chlng :any;

This is sufficient.

EDIT:

You need to add the following Modules to your app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        RouterModule,
        BrowserModule,
        FormsModule,
        // ...
    ],
    // ...

Upvotes: 1

Related Questions