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

Question

对于角度来说，我是新手。我只想从 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

它的哪一部分不能正常工作？看起来应该没问题。

<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，但这不会改变功能。

Answer 2

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 文件中创建的变量。所以它可以作为双向绑定

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>