單擊按鈕時如何獲取我在文本框中輸入的值？

Question

.HTML

<input type="email" #inputvalue>
<button type="submit" (submit)="onSubmit(inputvalue.value)">Verify</button>

.TS

export class LoginComponent implements OnInit {
   inputvalue: any;

   onSubmit(inputvalue: any) {
   this.inputvalue = inputvalue;
   console.log(this.inputvalue)
  }
}

• 單擊驗證按鈕后，我想將在文本框中輸入的值輸入到inputvalue變量中。

Answer 1

正如 Anurag 在他的評論中提到的那樣，您應該 go 並了解一些有關Angular的知識。 有兩種方法可以實現這一目標：

HTML

<input type="email" [(ngModel)]="emailValue">
<input type="email" #email>
<button (click)="submit()">Verify</button>

TS

import { Component, ViewChild, ElementRef } from '@angular/core';

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

  emailValue: string;
  @ViewChild('email', {static: true}) email: ElementRef;

  submit() {
   console.log(this.emailValue)
   console.log(this.email.nativeElement.value)
  }
}

堆棧閃電戰

Answer 2

此外，您可以使用formControlName = "emailValue"代替 ngModel 兩種方式綁定，您只需要 html 中的父 FormGroup。 您可以在線閱讀有關使用 FormGroup 的信息。 與 ngModel 相比，它更好且可維護