Проблема с использованием входного значения в функции угла

Question

Я делаю форму входа для школьного проекта, используя угловой, HTML выглядит так:

<input type="text" ng-model="username" name="username" />
<input type="text" ng-model="password" name="password" />
<button (click)="submit(username, password)">Login</button>

У меня есть функция отправки, определенная в файле машинописи, связанном с этим компонентом, когда я пытаюсьзапустить функцию, я получаю ошибку, потому что мои переменные не определены должным образом.Моя цель здесь состоит в том, чтобы взять введенный текст из разделов логина и пароля и вставить их в функцию отправки при нажатии кнопки. Я думал, что определение ng-модели сделает это, но я новичок в angular, поэтому я должен что-то делатьнеправильно.

Answer 1

<input type="text" [(ngmodel)]="username" name="username">
<input type="text" [(ngmodel)]="password" name="password">
<button (click)="submit()">Login</button>

в component.ts сначала определите поля для двусторонней привязки

public username:any;
public password:any

в функции отправки

submit(){
//call fields 
this.username
this.password
}

Надеюсь, вы импортировали модуль формы в appmoodule (root-module))

Answer 2

Я собираюсь перейти с тегом, который вы вставили в свой вопрос (Angular 2 +).

То, как вы используете ngModel в HTML, выглядит следующим образом:

<input type="text" [(ngModel)]="username" name="username" />
<button (click)="submit()">Login</button>

Вам нужно импортировать Forms Module, чтобы иметь возможность использовать ngModel

В вашем файле TS:

username: string;

submit(){
    //do whatever you want accessing the variable this way: this.username
}

Вы можете использовать форму, но этообъясняется в другом ответе.

Answer 3

Используйте ваши входные данные внутри тега формы,

<form (ngSubmit)="onSubmit()">
<input type="text" [(ngModel)]="username" name="username" />
<input type="text" [(ngModel)]="password" name="password" />
<button class="submit-button" type="submit">Submit</button>

Answer 4

Используйте [(ngModel)]. Каждый вход будет привязан к username и password соответственно.

Answer 5

Полагаю, вы используете Angular (2+), а не AngularJS (1.x).Если это так, то вы должны использовать ngModel вместо ng-model