Form and Angular

Hello, I am trying to change something in a form what I tried of the internet. All is ok but I can not get to work what I want :slight_smile:

In the html file before the change there was a button and when push the button a popup with input pops up:

<ion-fab right bottom>
  <button ion-fab color="primary" (click)="showInputAlert()"><ion-icon name="add"></ion-icon></button>
</ion-fab>

In the ts file this is what brings the popup:

showInputAlert() {
    let prompt = this.alertCtrl.create({
      title: 'Add New Item',
      message: "Add a new item to the todo list.",
      inputs: [{ name: 'title', placeholder: 'e.g Buy groceries' }],
      buttons: [
        { text: 'Cancel' },
        {
          text: 'Add',
          handler: data => {
            this.todoService.add(data.title, []).subscribe(
              response => {
                let todo: Todo = {
                  name: data.title,
                  done: false,
                  tags: []
                };
                this.todos.unshift(todo)
              }
            );
          }
        }
      ]
    });
    prompt.present();
  }

What I want and what I did is in the html:

<form >
      <ion-item>
        <ion-label>Todo</ion-label>
        <ion-input type="text" [(ngModel)]="title" name="title"></ion-input>
      </ion-item>
      <button ion-button (click)="OnSubmit()" name="add" block>Add Todo</button>
    </form>

And the ts file I added:

`onSubmit() {
              handler: data => {
            this.todoService.add(data.title, []).subscribe(
              response => {
     let todo: Todo = {
                  name: data.title,
                  done: false,
                  tags: []
                };
                this.todos.unshift(todo)
			  }         
		);
  }
	
}`

But ofcourse it did not work, I can type tekst in the field and push enter and then error OnSubmit is not a function error. I also can not figure out what part I have to put in the OnSubmit what I copy out of the ShowInputAlert, Anyone?

The error of not a function was because I uses OnSubmit instead of onSubmit, but now nothing happens :frowning:

When do the following then it almost works, only not showing the tekst that I type but empty field:

`onSubmit(title) {
		
              
            this.todoService.add(title, []).subscribe(
              response => {
     let todo: Todo = {
                  name: title,
                  done: false,
                  tags: []
                };
                this.todos.unshift(todo)
			  }         
		);
				  
  
	
}`

Solved:

onSubmit(title) {
		
              
            this.todoService.add(this.title, []).subscribe(
              response => {
     let todo: Todo = {
                  name: this.title,
                  done: false,
                  tags: []
                };
                this.todos.unshift(todo)
			  }         
		);
				  
  
	
}
1 Like