Получите значение из mat-input в угловом материале

02.12.2020Рубрика: ВопросыАвтор: admin

Поскольку я новичок в angular. Я просто хочу получить значение из mat-input, мне нужно получить значение из angular mat-input. Может ли кто-нибудь помочь мне в этом. заранее спасибо

<div fxLayoutAlign= "center center" fxFlexFill class="main-div">
<mat-card fxFlex= "20">
    <mat-toolbar color="primary" c>Bonbloc Login</mat-toolbar>
    <form fxLayoutAlign="stretch" fxLayout = "column" class="login-form">
        <mat-form-field>
          <input matInput required [(ngModel)] = "email" placeholder="email Id">
          <mat-hint align="end">Min 5 characters</mat-hint>
        </mat-form-field>

        <mat-form-field>
          <input matInput required [(ngModel)] = "password" type="password" placeholder="password">
        </mat-form-field>
        <button mat-raised-button type="submit" (click) = "login()">Login</button>
        <h1>Hi {{email}} {{password}}</h1>
      </form>
</mat-card>

login() {
console.log(this.email, this.password)
};

Может быть, это может помочь: stackoverflow.com/questions/20279484/ — person Hari Haran schedule 02.12.2020

Post Views: 87

См. также: Как вызвать функцию, когда пользователь щелкает за пределами диалогового окна

3 angular angular-material mat-input

Комментарии: 3

Hari Haran 02.12.2020 в 00:00
Какая его часть точно не работает? Похоже, все должно быть в порядке.
```
<input matInput required [(ngModel)]="email" placeholder="email Id">
```
Предположительно у вас есть соответствующая строка в .ts, объявляющая поле email для привязки:
```
public email: string;
```
Или похожие.

[(ngModel)] Это двусторонняя привязка, означающая, что все, что вы установили для email программно, будет помещено в текстовое поле, а все, что пользователь поместит в текстовое поле, установит значение email.

Ваш login() метод должен видеть это …
```
public login(): void {
  console.log('Entered email:', this.email);
}
```
Изменить: пример StackBlitz, показывающий базовая привязка рабочая. Не используется matInput, но это не повлияет на функциональность.

Если мне нужно получить ввод из самого поля ввода. и мне не нужно вводить значение в текстовое поле означает, что я должен делать .. ??? — person Hari Haran; 02.12.2020

Я вставил указанный выше код для входа. но это не работает — person Hari Haran; 02.12.2020

Я добавил StackBlitz, показывающий основной механизм, который вы пытаетесь использовать. — person Hari Haran; 02.12.2020
Ответить
Hari Haran 02.12.2020 в 00:00
html
```
<input matInput required [(ngModel)]="email" [value]="email" placeholder="your email" (change)="valuechange($event)">
```
component.ts
```
private email : string = '';

  valuechange() {
    console.log(this.email);
  }
```
Директива ng-model связывает значение элементов управления HTML, таких как ввод, выбор, текстовая область, с переменной, созданной в файле ts. поэтому его можно использовать как двустороннюю привязку
Ответить

Hari Haran 13.07.2021 в 00:00

Используйте также имя Что-нибудь вроде

<mat-form-field appearance="fill">
    <form>
       <mat-label>Insert Anything</mat-label>
       <input type="text"  matInput [(ngModel)] ="oName" name="oName" >
       <mat-hint>Serie</mat-hint>
    </form>
</mat-form-field>

Ответить

Добавить комментарий