CODEWITHSUNDEEP
angulartypescript
cfoster5
cfoster5

Reputation: 1826

Using Angular, how can I pass an ngmodel into a function?

This is a follow up to this question.

After reconfiguring the HTML, I am now stuck with passing an ngmodel, specifically emailinputs.email into the function sendinvite().

The new HTML is:

<ion-content>

  <ion-item id="row" *ngFor="let emailinput of emailinputs ; let i = index">
    <ion-label>
      Email
    </ion-label>
    <ion-input type="email" id="email" placeholder="[email protected]" (keyup.enter)="Send($event.target.value)" [(ngModel)]="emailinputs[i].email"></ion-input>
  </ion-item>

  <div padding>
    <button (click) = "addnewemail()" id="register" ion-button full color="nudgetprim" block>Add</button>
    <button (click) = "sendinvite(emailinput.email)" id="sendinvite" ion-button full color="nudgetprim" block>Invite</button>
  </div>

</ion-content>

The Typescript for the function is:

export class InvitePage {

    emailinputs = [{'id' : 'row0', 'name' : 'row0', 'email': ''}];

        sendinvite(emailinputs.email) {
      if (this.emailinputs.email==null || this.emailinputs.email=="" || !this.emailinputs.email.includes("@") || !this.emailinputs.email.includes("."))
        {
          let alert = this.alerCtrl.create({
                title: 'Error!',
                message: 'There was an error with an email address you entered.',
                buttons: ['Ok']
              });
              alert.present()
            }
      else {
      this.emailComposer.isAvailable().then((available: boolean) =>{
       if(available) {
       }
      });

      let email = {
        to: this.emailinputs.email,
        attachments: [],
        subject: 'Nudget Invite',
        body: '<a href="">Join my grocery list!</a>',
        isHtml: true
      };

      this.emailComposer.open(email);        }
    }
}

Using emailinputs.email results in errors and I'm not sure why.

Upvotes: 0

Views: 2290

Answers (1)

Prithivi Raj
Prithivi Raj

Reputation: 2736

I have updated the code below with your requirements. Please find the working version here

TS file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  emailinputs = [{'id' : 'row0', 'name' : 'row0', 'email': '[email protected]'},
  {'id' : 'row1', 'name' : 'row1', 'email': '[email protected]'}];
  emailNames : any=[];


  constructor(public navCtrl: NavController) {

  }

  sendinvite(){
    this.emailinputs.map((email)=>{
      this.emailNames.push(email.email);
    });
    alert(this.emailNames);
  }

  addnewemail() {
    this.emailinputs.push({'id' : 'row0', 'name' : 'row0', 'email': '[email protected]'});
}

}

HTML file

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>


   <ion-row id="row" *ngFor= "let emailinput of emailinputs">
      <ion-col col-3 id="label">
        Email
      </ion-col>
      <ion-col col-8 id="emailcol">
        <input type="email" id="email" placeholder="[email protected]" (keyup.enter)="Send($event.target.value)" [(ngModel)]="emailinput.email">
      </ion-col>
    </ion-row>

    <div padding>
    <button (click) = "addnewemail()" id="register1" ion-button full color="nudgetprim" block>Add</button>
    <button (click) = "sendinvite()" id="register" ion-button full color="nudgetprim" block>Invite</button>
  </div>
</ion-content>

Upvotes: 1

Related Questions