javascript 从输入字段Angular 代码中获取值

mi7gmzs6 于 2022-12-10 发布在 Java

关注(0)|答案(2)|浏览(127)

我想从函数的输入中获取值来发出警报，这是我的html

<div class="container p-5 ">
  <input #titleInput *ngIf="isClicked"  type="text"  class="col-4"><br>
  <button (click)="OnClick()" class="btn btn-primary col-2 ">
    Show 
  </button>
  <button (click)="Send(titleInput.value)" class="btn btn-success col-2 m-3">
    Send
  </button>
</div>

这是我的零件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

Send(data: any) {
  alert(data)

}

OnClick() {
  this.isClicked=true;
}
  title = 'demoproject1';
  isClicked=false;
}

我想从输入字段中获取值，并将值输入到组件函数中

JavaScript

来源：https://stackoverflow.com/questions/74740888/get-value-from-a-input-field-angular-with-code

2条答案

按热度按时间

jei2mxaa1#

创建变量以存储输入值：
component.ts

...
export class AppComponent {
input: string;
...

将FormsModule添加到模块.ts（如果尚未导入）
module.ts

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

在HTML上设置ngModel：
HTML格式：

<input type="text" [(ngModel)]="input" ></-input>

**重要提示：**不要忘记在app-routing.module.ts中向组件添加路由

ngModel Docs

赞(0）回复(0）举报 2022-12-10

jgzswidk2#

@ViewChild('titleInput') titleInput: 
ElementRef;

ngAfterViewInit() {
  // Put your logic here ...
}

我把代码放在这里：https://stackblitz.com/edit/angular-ivy-b4hcqw?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

赞(0）回复(0）举报 2022-12-10

我来回答

javascript 从输入字段Angular 代码中获取值

2条答案

相关问题

热门标签

最新问答