时间戳

首页 > 解决方案 > 如何以角度 8 从表单中获取数据

angular - 如何以角度 8 从表单中获取数据

问题描述

 <form ngSubmit="loginUser()">
  <div class="row">
    <div class="col-md">
      <mat-form-field class="example-full-width" >
        <input matInput type="text" name="user_first_name" placeholder="First Name" value=" 
             {{data['user_first_name']}}">
        <button mat-button  matSuffix mat-icon-button aria-label="First Name" (click)="firstname=''">
        <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>                
    </div>
  <div class="row">
    <div class="col-md">
      <mat-form-field>
        <mat-select [(value)]="selected"  placeholder="Role">
          <mat-option value="User">User</mat-option>
          <mat-option value="Viewer">Viewer</mat-option>
        </mat-select>
      </mat-form-field>           
    </div>

我想打印在控制台中输入的文本和下拉列表中的数据我不知道如何捕获它

标签： angular

解决方案

为您的两个字段创建两个变量并在表单字段中使用 [(ngModel)]。

TS：

first_name: any;
role: any;

HTML：

<form ngSubmit="loginUser()">
  <div class="row">
    <div class="col-md">
      <mat-form-field class="example-full-width" >
        <input matInput type="text" name="user_first_name" placeholder="First Name" value=" 
             {{data['user_first_name']}}" [(ngModel)]="first_name" >
        <button mat-button  matSuffix mat-icon-button aria-label="First Name" (click)="firstname=''">
        <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>                
    </div>
  <div class="row">
    <div class="col-md">
      <mat-form-field>
        <mat-select placeholder="Role" [(ngModel)]="role">
          <mat-option value="User">User</mat-option>
          <mat-option value="Viewer">Viewer</mat-option>
        </mat-select>
      </mat-form-field>           
    </div>

并单击您的按钮，您可以像这样打印这两个值：

loginUser() {
    console.log(this.first_name);
    console.log(this.role);
}

推荐阅读