最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin8浏览0评论

I am new to Angular (it's actually my third day, with some semi-consistent prior JS knowledge) and I'm a little confused about how to console.log the text that the user writes in the input box when pressing the submit button next to it.

I know the answer to this question should be found in any part of the internet, but I didn't find it by googling in multiple ways.

TS part of the ponent:

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

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

HTML part of the ponent:

<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 part of the ponent:

.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;
}

I managed to get the button to console log anything, but i don't know how to associate it with the text from the input.

I am new to Angular (it's actually my third day, with some semi-consistent prior JS knowledge) and I'm a little confused about how to console.log the text that the user writes in the input box when pressing the submit button next to it.

I know the answer to this question should be found in any part of the internet, but I didn't find it by googling in multiple ways.

TS part of the ponent:

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

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

HTML part of the ponent:

<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 part of the ponent:

.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;
}

I managed to get the button to console log anything, but i don't know how to associate it with the text from the input.

Share Improve this question asked Aug 22, 2019 at 9:11 Alexandru-Marian ConstantinAlexandru-Marian Constantin 771 gold badge1 silver badge12 bronze badges 2
  • 1 have you explored about ngModel? – Suhas Parameshwara Commented Aug 22, 2019 at 9:14
  • Yesterday I wrote an answer to a similar problem: stackoverflow./questions/57589793/… Might help you. In the example it toggles the class of the element near to it. In your case you just have to read the .value of it – MauriceNino Commented Aug 22, 2019 at 9:15
Add a ment  | 

4 Answers 4

Reset to default 4

Easiest way to do this is by adding a template reference variable if you don't want to use template driven/reactive forms:

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

In the ponent:

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

This can be done using ngModel in Angular.

TS

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

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

HTML

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

To use ngModel you have to import FormsModule package in app.module.ts

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

    @NgModule({
        imports: [
             FormsModule      
        ]

Basically, ngModel is used to bind value from the respective HTML element. ngModel is mostly used on template-driven forms. If you have more than two inputs you can use reactive forms.

Firstly, it will be better to keep the (click) event in the button element instead of keeping it in the parent div element.

We can do this in many ways. It pletely depends on how you want to do it. First you can use a template variable to pass the value of input to the click function.

Component

import { Component } from '@angular/core';
@Component({
  selector: 'app-input-boxes',
  templateUrl: './input-boxes.ponent.html',
  styleUrls: ['./input-boxes.ponent.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>

Second way is to use ViewChild and ElementRef from angular/core

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
   selector: 'app-input-boxes',
   templateUrl: './input-boxes.ponent.html',
   styleUrls: ['./input-boxes.ponent.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>

This is how we can simply print. If you are using any forms, it can vary based on the type of form we are using.

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

The following code will help you trigger whenever value changes

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


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

Or by simply

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

you can get value from variable

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论