Angular2 passing value from template to function on buttonclick

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

Give a try Like this

<div class="container">

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

</div>

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

Example Plunker

try this

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

your TS

    model = {
        name : null
    };
    private idparam = "FooBar";

    verifyNik(obj) {
        if (this.idparam === obj.viewModel.substring(1, 4)) {
            console.info("true");
        }
    }

or

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

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

<button #ee value="sravan" name="b1"(click)="fun(ee.value)">button 1</button>
<button #ff name="b2" value="buttontwo"(click)="fun(ff.value)">button 2</button>
<button #hh name="b3"value="buttonthree"(click)="fun(hh.value)">button3</button>
<button #kk name="b4" value="buttonfour"(click)="fun(kk.value)">button4</button>
<button  #ll name="b5"value="buttonfive"(click)="fun(ll.value)">button5</button>

value = {{selecte}}



    <input type="text"  #name>

  <button (click)="ver(name.value)">Verify</button>



ts:

selecte:any;
fun(data:string){
  this.selecte=data;
}

ver(sara:string) {

  console.log(sara);
}