typescript - Legg til DOM-element ved knappetrykk med Angular 2+

Hei, jeg lærer hvordan man manipulerer DOM med Angular 2+ og jeg vil legge til et input-felt med typen e-post når klikkhendelsen utløses. Jeg har gjort litt research på Google, men kunne ikke finne en løsning med Angular 2+.

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

Hvordan kan jeg lage ekstra inputfelt under det allerede eksisterende? Hvilke verktøy kan jeg bruke?

addInputEmail(){
}

Ved hvert knappetrykk skal et nytt inndatafelt genereres. Jeg er litt håpløs fordi jeg ikke vet hvilke 'verktøy' jeg må bruke for å manipulere det i utgangspunktet.

Takk.

Svar #1

Noe sånt burde fungere --

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

Håper dette gir mening.

Du bygger inndataelementene basert på arraysen av e-poster. Og når du trykker på knappen legger du til i arraysen, noe som oppretter en ny inndata i malen.

Relaterte artikler