CODEWITHSUNDEEP
htmlangularngx-chips
Souad
Souad

Reputation: 5094

How to retrieve the value of ng-input in Angular 6

I'm using Angular 6 and the module ngx-chips to use ng-input field, so this is the HTML template:

      <div class="form-group container">
        <div class="row">
          <div class=" col-sm-12">
            <label for="FormControlAlias"
              class="col-sm-2 col-form-label float-left">Alias</label>
            <div class="col-sm-8 float-left" >
              <tag-input #alias [(ngModel)]="aliasList"
                [secondaryPlaceholder]="'Enter the project aliases'"
                [placeholder]="'Enter an alias'"
                [modelAsStrings]="true"
                name="alias" [separatorKeyCodes]="[188]" > </tag-input>
            </div>
          </div>
        </div>
      </div>
<button type="button" class="btn btn-primary"
            (click)="addAlias(alias.value);>Add</button>

Here is the function I call by clicking the button:

addAlias( alias: Array<string>): void {

    console.log(alias.value);

}

in the console I get this error :

ERROR TypeError: "alias is undefined"

I want to get the value of #alias and make a post request into the database, but I can't retrieve the value.

Upvotes: 0

Views: 330

Answers (2)

Amit Chigadani
Amit Chigadani

Reputation: 29765

You need not send alias value from template. You already have those values in aliasList set via ngModel. Just use that.

addAlias() {
    console.log(this.aliasList);
}

template

<button type="button" class="btn btn-primary"
            (click)="addAlias()">Add</button>

Upvotes: 1

antoine dieval
antoine dieval

Reputation: 38

You have to define aliasList as a variable in your class.

After you can retreive the value with : 

addAlias(): void{
    console.log(this.aliasList);
}

Upvotes: 1

Related Questions