如何将Angular 2表单输入传递给TypeScript组件？

Question

I am new to angular 2.I am looking for a way to pass the form input values to the ts component ,to send to spring controller as a JSON string.The basic form I have created is as follows

person.component.html

    <div class="panel-body">
    <div class="row">   
    <div class="col-sm-1"><label class="control-label" for="Name">Full Name:
   </label></div>
    <div class="col-sm-3">
    <input type="text" class="form-control2" placeholder="Full Name" 
    [(ngModel)]="user.name"></div></div>  
    <br>
    <div class="row">
    <div class="col-sm-1"><label class="control-label" for="Email">Email:</label></div>
        <div class="col-sm-3">
            <input type="text" class="form-control2"  [(ngModel)]="user.email">
        </div>
   </div>
   <br>
    <div class="col-sm-9">              
                <button class="btn1" (click)="savePage()"><b>Save</b></button>
            <button class="btn1" (click)="resetPage()"><b>Cancel</b></button>
                </div>  </div>

person.ts

export class Person {
    constructor(
        public name: string,
        public email: string,
            ) {  }
}

What is to be done further?

Answer 1

You are passing it already! [(ngModel)]="user.name" - this is so called two way binding. Now, in your typescript file, object user is filled with your inputs' values Now you would need some kind of service, ie user.service.ts which needs to be specified in your Component's providers.

//component

@Component({
  [...]
  providers: [UserService]
})


export class SomeComponent {

  user: User = new User();

  public SomeComponent(private _userService: UserService) {}

  public addUser(): void {
    this._userService.addUser(this.user).subscribe(res => {
      console.log(res); //whatever
    });
  }
}

//service

public addUser(user: User) {
    return this.http.post(this.host + this.apiPrefix + '/users/', JSON.stringify(user),
      {headers: <your headers>})
    .map((res: any) => {
      return res;
    });
  }

Answer 2

If you are using [(ngModel)] your Person.ts look like this

export class Person {
    name: string;
    email: string; 
}

then import it in person.component.ts

import { Person  } from 'person.ts';

and inside your class PersonComponent declare user:Person; then call this.user = new Person(); like this in constructor

now [(ngModel)] will map the data for you.

Answer 3

In TypeScript you can do things like:

export class Person {
  name: string;
  email: string;
}

const email = 'some mail';
const name = 'some name';
const person: Person = { name: name , email:email }

In your case it would be:

const person: Person = {name: user.name, email: user.email}

or just

const person: Person = user;

In the end you just need to make sure, that the properties match. If you have, for example, a methode like this:

 someMethod(input: Person): void {}

You can pass your user object as an parameter:

 someMethod(user); <--- this will work;