Question

如何清除Angular4中的文本框？我是菜鸟，刚刚做了一个简单的登录表格。单击“提交按钮”，我想清除登录时输入的凭据。

我的 login.component.ts

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

@Component({
  selector: 'app-xyz',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  submitted = false;
  onSubmit() { 
    this.submitted = true;
    // code here to clear textbox

  }
  constructor() { }
  obj = {
    myname: 'Jay'
  }
  ngOnInit() {
  }

}

Answer 1

<input [(ngModel)]="username">
<input [(ngModel)]="password" type="password">
<button type="submit" (click)="login()">Submit</button>

然后在您的component.ts中：

export class LoginComponent implements OnInit {
    username;
    password;

    login() {
        // Perform your login

        // Then finally
        this.username = '';
        this.password = '';
    }
}

https://stackblitz.com/edit/angular-ohjfyw

这是一个非常基础的文章，您可以在发布此处之前先参考angular文档。

还有其他更清洁的方法（使用Angular Forms），但这是基本方法。

Answer 2

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

@Component({
  selector: 'app-xyz',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  submitted = false;
  obj = {
    myname: 'Jay'
  }

  constructor() { }

  ngOnInit() {
  }

  onSubmit() { 
    this.submitted = true;
    this.obj.myname = '';

  }
}

您的模板应如下所示：

    <input [(ngModel)]="obj.myname">
    <button type="submit" (click)="onSubmit()">Submit</button>

Answer 3

如果您使用模板表单，则可以通过这种方式完成

onSubmit() {
  this.submitted = true;
  // clear textbox or input in html
  obj.myname: '';
}

如果您使用反应形式，则可以使用form.reset（）或form.patchValue（）

清除“ Angular4”中的文本框

3 个答案: