Angular2 passing value from template to function on buttonclick

Question

I have an Angular2 form template of component like this:

<div class="container">

  <div class="input-group">
    <label> Masukkan nik </label>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" #name>
  </div>
     <button (click)="verifyNik(name.value)">Verify</button>

</div> <!-- /container -->

What I want to do if I click the Verify button is to get the value of name input and pass it to my function in my component, which is like this below:

verifyNik(nik){
    if(this.idparam==nik.substring(1,4)){
      console.log("true");
    }
  }

So, if the value of input name in template (and substring it) is equal to my id.param (which I get from subscribe id in Angular route), then the console log will be true; but the problem is that nothing comes out. How can I fix this?

My code to get my id.param is this:

private idchild:any;
  f: FormGroup;
  private idparam:any;


  constructor(
    private fb: FormBuilder,
    private servicedev:DevService,
    private complaintservice:ComplaintService,
    private router: ActivatedRoute
  ) { }

     ngOnInit() {
        this.idchild = this.router.params.subscribe(params => {

           let id = params['id'];
           this.idparam=id;

          // Retrieve Pet with Id route param

       });

Answer 1

<div class="input-group">
  <label> Masukkan nik </label>
  <input type="text" class="form-control" placeholder="Username" 
   aria-describedby="basic-addon1" #name>
</div>
<button (click)="verifyNik(name)">Verify</button>

then in your .ts

verifyNik(nik) {
  if(this.idparam == nik.value.substring(1, 4)) {
    console.log("true");
  }
}

Answer 2

You could use FormControl of the FormBuilder your using. Check below code snippet

HTML Code Snippet

<form [formGroup]="testForm" (ngSubmit)="submitForm(testForm.value)">
  <div class="form-group">
    <label> Masukkan nik </label>
    <input type="text" class="form-control" placeholder="Username" [formControl]="testForm.controls['name']" [(ngModel)]="user.name">
    <div *ngIf="testForm.controls['name'].hasError('required') && testForm.controls['name'].touched" class="alert alert-danger">Name field cannot be empty.</div>
  </div>
  <button class="btn btn-info" type="submit" [disabled]="!testForm.valid">Verify</button>
</form>

Above you could see that I have form tag with the formGroup name defined as testForm and ngSubmit calling submitForm method with testForm instance values

Apart from that I have defining an ngModel and FormControl for the input tag. Additionally I have added Required constraint message. A button type submitsince i am using ngSubmit to submit the whole form. and a disable feature to disable button if the form is not valid.

Lets check the component in the below code snippet

Component Code Snippet

export class TestComponent implements OnInit {
  user: User = new User('');
  constructor(fb: FormBuilder) {
    this.testForm = fb.group({
      'name': [null, Validators.required]
    });
  }

  ngOnInit() {

  }

  submitForm(value: any) {
    console.log(value);
  }
}

You have to create a User Model with desired attributes. Use it to create user instance which will be used in the ngModel in html to bind data (two binding) Create testForm instance of FormBuilder in the constructor and with the required constraint. Check the submitForm method, console.log will trigger once u click Verify button with the value