クラスオブジェクトを関数にパラメータとして使用して配列に追加する

Question

私は配列にメンバーを追加できる単純な基底を作りたいと思います。私はAngularチュートリアル（link）から "Tour of Heroes"を変更します。関数に名前（文字列）を渡す代わりに、私がやりたいことは、クラスオブジェクト全体（ユーザー）を与えたいと思っています。私はユーザーが彼の名前と姓（そして彼が欲しいならば、都市）をタイプしているところにフォームを使用します。文字列パラメータのリストではなく、入力からこのオブジェクト全体をどのように機能させるかわかりません。ここに私のコードは次のとおりです。 form.html ：

<div class="form-group"> 
    <label for="Name">Name</label> 
    <input type="text" class="form-control" id="Name" required name="nameField" [(ngModel)]="ngModel" #nameField="ngModel" > 
    <div [hidden]="nameField.valid || nameField.pristine" class="alert alert-danger">Name is required</div> 
    </div> 

    <div class="form-group"> 
    <label for="surname">surname</label> 
    <input type="text" class="form-control" id="surname" required name="surnameField" ngModel #surnameField="ngModel"> 
    <div [hidden]="surnameField.valid || surnameField.pristine" class="alert alert-danger">Surname is required</div> 
    </div> 

    <div class="form-group"> 
    <label for="city">City</label> 
    <input type="text" class="form-control" id="city" name="city" ngModel #cityField="ngModel" > 
    </div> 

    <button type="submit" class="btn btn-success" [disabled]="!userForm.form.valid">Submit</button> 

</form> 

を提出上の機能：

onSubmit(name: string, surname: string, city: string): void{ 
name = name.trim(); 
surname = surname.trim(); 
city = city.trim(); 

this.myservice.create(name, surname, city) 
    .then(newUser => this.arrayUsers.push(newUser)); 
} 

そして機能はMYSERVICE内部で作成します。

private headers = new Headers({'Content-Type': 'application/json'}); 
private heroesUrl = 'api/mainArray'; // URL to web api 
create(name: string, surname: string, city?: string): Promise<User> { 
return this.http 
    .post(this.heroesUrl, JSON.stringify({name: name, surname:surname, city:city}), {headers: this.headers}) 
    .toPromise() 
    .then(res => res.json().data as User); 
} 

Answer 1

を宣言します例えば

：フォームへのそれぞれの入力に結合する属性

<input type="text" class="form-control" id="name" ngModel required name="nameField" > 
<input type="text" class="form-control" id="surname" ngModel required name="surnameField" > 
<input type="text" class="form-control" id="city" ngModel required name="cityField" ngModel > 

そしてform要素では、コンポーネントにそれを結合することができるとして、フォームを追加するために、フォームに名前を付けます

今、あなたはf.valueプロパティでユーザーを検索することができるはずです：：

onSubmit()メソッドのパラメータ

onSubmit(f: NgForm): void{ 

this.myservice.create(f.value) 
    .then(createdUser=> this.arrayUsers.push(createdUser)); 
} 

詳細情報はこちらhttps://angular.io/api/forms/NgModel