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

Question

我是角度新手2.我正在寻找一种方法将表单输入值传递给ts组件，作为JSON字符串发送到spring控制器。我创建的基本表单如下

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

还有什么要做的？

Answer 1

你已经过去了！ [(ngModel)]="user.name" - 这就是所谓的双向约束。现在，在你的打字稿文件中，对象user充满你的输入值现在你需要某种服务，即需要在你的Component的提供者中指定的user.service.ts。

//零件

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

//服务

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

如果你正在使用[(ngModel)]你的Person.ts看起来像这样

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

然后在person.component.ts中导入它

import { Person  } from 'person.ts';

在你的班级里面PersonComponent宣布user:Person;然后在this.user = new Person();这样调用constructor

现在[(ngModel)]将为您映射数据。

Answer 3

在TypeScript中，您可以执行以下操作：

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

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

在你的情况下，它将是：

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

要不就

const person: Person = user;

最后，您只需要确保属性匹配。例如，如果您有这样的方法：

 someMethod(input: Person): void {}

您可以将用户对象作为参数传递：

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