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

Question

我是 Angular 的新手（这实际上是我的第三天，具有一些半一致的先验 JS 知识）并且我对如何 console.log 用户想要的文本感到有点困惑按下旁边的提交按钮时在输入框中写入。

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

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

如果您不想使用模板 driven/reactive 表单，最简单的方法是添加模板引用变量：

<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

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

Answer 4

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

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

组件

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>

这就是我们可以简单打印的方式。如果您使用任何表格，它会根据我们使用的表格类型而有所不同。

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

How to console log the text from an input when pressing the button associated with it?

javascript

angular

input

submit