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

Поскольку я новичок в 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

См. также:  кеширование модулей go в сборке кода без пользовательского образа докера
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 3
  1. Hari Haran

    Какая его часть точно не работает? Похоже, все должно быть в порядке.

    <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

  2. Hari Haran

    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. поэтому его можно использовать как двустороннюю привязку

  3. Hari Haran

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

    <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>
    
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: