按下与之关联的按钮时，如何控制台记录输入中的文本？

Question

我是 Angular 的新手（这实际上是我的第三天，之前有一些半一致的 JS 知识），我有点困惑如何控制台记录用户在按下时在输入框中输入的文本旁边的提交按钮。

我知道这个问题的答案应该可以在互联网的任何地方找到，但我没有通过多种方式谷歌搜索。

组件的TS部分：

import { Component } from '@angular/core';

@Component({
  selector: 'app-input-boxes',
  templateUrl: './input-boxes.component.html',
  styleUrls: ['./input-boxes.component.css']
})
export class InputBoxesComponent {
  onClick(){
    console.log();
  }
}

组件的HTML部分：

<div class="first-row">

    <div class="input-button">   

        <mat-form-field class="input">
            <input matInput placeholder="Text">
        </mat-form-field>

        <div class="button" (click)="onClick()">
            <button mat-raised-button class='submit-button'>Submit</button>
        </div>

    </div>

    <div class="input-button">

        <mat-form-field class="input">
            <input matInput placeholder="Text">
        </mat-form-field>

        <div class="button">
            <button mat-raised-button class='submit-button'>Submit</button>
        </div>

    </div>

</div>

组件的CSS部分：

.first-row {
    display: flex;
    width: 66%;
    justify-content: space-around;
}

.input-button {
    display: flex;
    width: 45%;
}

.mat-raised-button {
    background-color: #FFC200;
    color: black;
}

.input {
    width: 100%;
}

.button {
    margin-left: 10px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
}

我设法得到按钮来控制台记录任何内容，但我不知道如何将它与输入中的文本相关联。

Answer 1

如果您不想使用模板驱动/反应式表单，最简单的方法是添加模板引用变量：

<mat-form-field class="input">
    <input matInput placeholder="Text" #input>
</mat-form-field>

<div class="button" (click)="onClick(input.value)">
    <button mat-raised-button class='submit-button'>Submit</button>
</div>

在组件中：

onClick(value){
    console.log(value);
}

Answer 2

这可以在 Angular 中使用 ngModel 来完成。

TS

import { Component } from '@angular/core';

@Component({
  selector: 'app-input-boxes',
  templateUrl: './input-boxes.component.html',
  styleUrls: ['./input-boxes.component.css']
})
export class InputBoxesComponent {
  public text: string;
  onClick(){
    console.log(this.text);
  }
}

HTML

<input matInput placeholder="Text"
      [(ngModel)]="text">

要使用 ngModel，你必须在 app.module.ts 中导入 FormsModule 包

import { FormsModule } from '@angular/forms';

    @NgModule({
        imports: [
             FormsModule      
        ]

基本上，ngModel 用于绑定来自相应 HTML 元素的值。 ngModel 主要用于模板驱动的表单。如果您有两个以上的输入，您可以使用响应式表单。

Answer 3

首先，最好将(click) 事件保留在按钮元素中，而不是将其保留在父div 元素中。

我们可以通过多种方式做到这一点。这完全取决于你想怎么做。 首先，您可以使用模板变量将 input 的值传递给 click 函数。

组件

import { Component } from '@angular/core';
@Component({
  selector: 'app-input-boxes',
  templateUrl: './input-boxes.component.html',
  styleUrls: ['./input-boxes.component.css']
})
export class InputBoxesComponent {
  onClick(value){
    console.log(value);
  }
}

HTML

<mat-form-field class="input">
  <input matInput placeholder="Text" #inputText>
</mat-form-field>
<div class="button" (click)="onClick(inputText.value)">
  <button mat-raised-button class='submit-button'>Submit</button>
</div>

第二种方法是使用 angular/core 中的 ViewChild 和 ElementRef

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
   selector: 'app-input-boxes',
   templateUrl: './input-boxes.component.html',
   styleUrls: ['./input-boxes.component.css']
})
export class InputBoxesComponent {
     @ViewChild("inputText")input: ElementRef
     onClick(){
         console.log(this.input.value);
     }
 }

HTML

<mat-form-field class="input">
    <input matInput placeholder="Text" #inputText>
</mat-form-field>
<div class="button" (click)="onClick()">
   <button mat-raised-button class='submit-button'>Submit</button>
</div>

这就是我们可以简单地打印的方式。如果您使用任何表单，它可能会因我们使用的表单类型而异。

Answer 4

Stackblitz：https://stackblitz.com/edit/angular-cgg96i?file=src%2Fapp%2Fapp.component.html

以下代码将帮助您在值更改时触发

<input type="text" [(ngModel)]="username" (ngModelChange)="onTyping(username)">


  onTyping($event){
    console.log($event)
  }

或者简单的

<input type="text" [(ngModel)]="username">
<button (click)="onClick()">Click me</button>

你可以从变量中获取价值

onClick(){
 console.log(this.username)
}