angular - 从角度材料中的垫子输入中获取值

Question

作为我的新角度。我只想从 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)
};

Answer 1

html

<input matInput required [(ngModel)]="email" [value]="email" placeholder="your email" (change)="valuechange($event)">

组件.ts

private email : string = '';

  valuechange() {
    console.log(this.email);
  }

ng-model 指令将输入、选择、文本区域等 HTML 控件的值绑定到在 ts 文件中创建的变量。所以它可以作为双向绑定

Answer 2

它的哪一部分不完全工作？看起来应该没问题。

<input matInput required [(ngModel)]="email" placeholder="email Id">

.ts大概您在声明email要绑定的字段中有一条匹配的行：

public email: string;

或类似的。

[(ngModel)]是双向绑定，这意味着您email以编程方式设置的任何内容都将放入文本框中，而用户放入文本框中的任何内容都将设置email's 值。

你的login()方法应该可以看到这个...

public login(): void {
  console.log('Entered email:', this.email);
}

编辑：示例StackBlitz显示基本绑定工作。不使用matInput，但这不会改变功能。

Answer 3

也使用这个名字

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