Как получить значение ng-input в Angular 6

Question

Я использую Angular 6 и модуль ngx-chips для использования поля ng-input, так что это HTML-шаблон:

      <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>

Вот функция, которую я вызываю нажатием кнопки:

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

    console.log(alias.value);

}

в консоли я получаю эту ошибку:

ERROR TypeError: "alias is undefined"

Я хочу получить значение #alias и отправить запрос в базу данных, но не могу получить значение.

Answer 1

Вам не нужно отправлять alias значение из шаблона. У вас уже есть эти значения в aliasList, установленные через ngModel. Просто используйте это.

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

шаблон

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

Answer 2

Вы должны определить aliasList как переменную в вашем классе.

После того, как вы можете получить значение с помощью:

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