How to Pass Input Value into a Function on Form Submit in Angular 6

How do you pass input value into a function on form submit in Angular 6?

You are doing two way binding in the search bar with var searchValue so you need to change only pass this var on click of submit.
Just replace your click event

(click)='performSearch(searchBar.value)' to
(click)='performSearch(searchValue)'

angular6: passing value of the input field to the component

Try to add #todo to the input. After that angular should be able to acces to the right input. Without that it gets undefined variable instead.

<mat-card>
  <form>
    <mat-form-field class="example-full-width">
      <input #todo matInput type="text" name="todo" placeholder="Enter a todo">
    </mat-form-field>
       
    <button mat-raised-button color="primary" type="button" (click)="addTodo(todo.value)">Add Todo
    </button>
  </form>
</mat-card>

pass "html input value" to angular process

Create a Template Variable on the input and then you can use it's value property while calling the assignName method.

Something like this:

<div>
  Common Name:
  <input #commonName name="commonName" value="">
  <p>
    <button (click)="assignName(commonName.value)">Submit</button>
    </p>
</div>

Here's a Working Sample StackBlitz for your ref.

Pass input text value to function per click

As user776686 suggested, there is a formControlName missing linked to "reason" field.

To get the field value in HTML you should access to the FormGroup controls:

(click)="approveRegistration(user.id, form.controls.reason.value)"

Also you can create a "get" property in TS code and then access to it in HTML:

get reason() {
  return this.form.controls.reason.value;
}

(click)="approveRegistration(user.id, reason)"

BTW, a field can be accessed too through the "get" method of a FormGroup:

get reason() {
  return this.form.get('reason').value;
}

Angular2 passing value from template to function on buttonclick

<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");
  }
}

How can I pass a FormControl to a function from the template?

I think this is what you want to achieve.

import { Directive, HostListener, Optional, Output, EventEmitter } from '@angular/core';import { NgControl, FormControl } from '@angular/forms';
@Directive({  selector: '[appOnClickControl]' // if you want to target specific form control then use custom selector else you use can use input:                                   // selector: 'input' to target all input elements})export class TestDirective {  @Output() emitFormControl = new EventEmitter<FormControl>();
  constructor(@Optional() private formControl: NgControl) {  }

  /**   * If your only goal is to set value to the form control  then use this   */  @HostListener('click')  onClick() {    if (this.formControl) {      this.formControl.control.setValue('test');    }  }
  /**   * If you wanna pass the form control through the function you might use this   */  @HostListener('click')  getFormControl(): void {      this.emitFormControl.emit(this.formControl.control as FormControl);  }}

 <input  appOnClickControl // use this to initialize directive  (emitFormControl)="yourMethod($event)" // $event is the clicked form control  formControlName="test"></input>

Angularjs: How to pass a input value to a function?

You don't need the {{ }}. I assume you already have mysearch defined, but if not, you also need ng-model like this:

<input id="input-search" name="mysearch" ng-model="mysearch" ng-keyup="$event.keyCode == 13 ? loadItems(mysearch) : null" placeholder="Search">
    <span id="input-search-clear" class="fa fa-times-circle"></span>
</input>

Also, you should use a directive like ngEnter from this StackOverflow answer to make the code cleaner: https://stackoverflow.com/a/17364716/3450859

Then it would be:

<input id="input-search" name="mysearch" ng-model="mysearch" ng-enter="loadItems(mysearch)" placeholder="Search">
    <span id="input-search-clear" class="fa fa-times-circle"></span>
</input>

Angular 4 - get input value

<form (submit)="onSubmit()">
   <input [(ngModel)]="playerName">
</form>

let playerName: string;
onSubmit() {
  return this.playerName;
}

Angular 6 add input on enter key

You can approach this using Reactive Forms FormArray. You would attach an (keyup) or (keyup.enter) handler to the <input />. Within the handler for this keyup event, we push a new FormControl to a FormArray. This example uses FormBuilder to generate a FormGroup that contains a FormArray with a key of things. We use the push method of FormArray to add a new FormControl/AbstractControl within the handler for keyup.

Component:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
    
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  myForm: FormGroup;
    
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
    
    
  onEnter() {
    this.addThing();
  }
    
  get things() {
    return this.myForm.get('things') as FormArray;
  }
    
  private createForm() {
    this.myForm = this.fb.group({
      things: this.fb.array([
        // create an initial item
        this.fb.control('')
      ])
    });
  }
    
  private addThing() {
    this.things.push(this.fb.control(''));
  }
}

Template:

<form [formGroup]="myForm">
    <div formArrayName="things">
        <div *ngFor="let thing of things.controls; let i=index">
            <label [for]="'input' + i">Thing {{i}}:</label>
            <input type="text" [formControlName]="i" [name]="'input' + i" [id]="'input' + i" (keyup.enter)="onEnter()"  />
        </div>
    </div>
</form>

At a very basic level you can loop through each in the form array using the controls property of the respective FormArray element and the value using the value property:

<ul>
  <li *ngFor="let thing of things.controls">{{thing.value}}</li>
</ul>

Here is a StackBlitz demonstrating the functionality.