Question

您好我正在学习如何使用Angular 2+操作DOM，并且我想在触发click事件时添加一个带有电子邮件类型的输入字段。我已经和google研究了一下，但是找不到Angular2 +的解决方案。

<form>
<fieldset>
  <legend>
    <span class="number">3</span>E-Mail Receipants</legend>
  <input type="email" name="email1" placeholder="E-Mail Recipients john.doe@mail.com">
  <input type="button" value="Add E-Mail" (click)="addInputEmail()">
</fieldset>
<input type="submit" value="Generate Template" />

如何在已有的inpult字段下生成额外的inpult字段？我可以使用哪些工具？

addInputEmail(){
}

在每个按钮上单击，应生成新的输入字段。我有点无望，因为我不知道＆＃39;工具＆＃39;我必须首先操纵它。

感谢。

Answer 1

这样的事情应该有效 -

 <div *ngFor='let email of emails'>
   <input type="email" [attr.name]="email" >
 </div>
 <input type="button" value="Add E-Mail" (click)="addInputEmail()">

-

export class formComponent {
  emails = ["email1"];
  emailNumber = 1;
  constructor () {

  }

  addInputEmail() {
    this.emailNumber++; 
    this.emails.push("email"+this.emailNumber)
  }
}

希望这是有道理的。

您正在根据电子邮件数组构建输入元素。按下按钮，您将添加到阵列中，该阵列将在模板中创建新输入。

使用Angular 2+在Button上单击添加DOM元素

1 个答案: