すべてのフォームの値はAngular2フォームに投稿されていません

Question

私のangular2アプリケーションでは、ユーザーがGoogleにサインアップし、プロフィールページにリダイレクトされるGoogleログインoauthログインページがあります。ログインが成功すると、

navigateByUrl("/profile"); 

メソッド。私はDIを介してプロファイルページにユーザーの電子メールを与えるモデルを設定しています。 私が抱えている問題は、プロファイルページのすべての内容がメソッドに掲載されていないことです。userNameとuserEmailの値だけが表示されます。 コードは次のとおりです。

Profile.component.html

<form #f="ngForm" (ngSubmit)="addProfile(f.value, $event)"> 
     <div class="field-wrapper"> 
      <input type="text" placeholder="Enter Name" [(ngModel)]="profileData.UserName" name="UserName" ngModel disabled><i class="icon-Name"></i> 
     </div> 
     <div class="field-wrapper"> 
      <input type="text" placeholder="Enter Email" [(ngModel)]="profileData.UserEmail" name="UserEmail" ngModel disabled><i class="icon-Email"></i> 
     </div> 
     <div class="field-wrapper"> 
      <input type="text" #grades data-role="tagsinput" placeholder="Enter Grade" [(ngModel)]="profileData.Grades" ngModel name="Grades" ><i class="icon-Class"></i> 
     </div> 
     <div class="field-wrapper"> 
      <!--<input type="text" #subjects data-role="tagsinput" placeholder="Enter Subjects" [(ngModel)]="profileData.Subjects" ngModel name="Subjects"><i class="icon-Subject" ></i>--> 
     </div> 
     <button type="submit" class="primary-btn" >Save Profile</button> 
    </form> 

Profile.compontent.ts

import { Router, ActivatedRoute } from '@angular/router'; 
import { ProfileData } from './profile.data'; 
import { ProfileService } from './profile.service'; 
import { ViewChild, ElementRef, AfterViewInit, Component, Input, Output, }  from '@angular/core'; 
import { FormsModule, NgForm, FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms"; 

declare var jQuery: any; 
@Component({ 
selector: 'profile', 
templateUrl: 'app/profile/profile.component.html', 
providers: [ProfileService] 
}) 

export class ProfileComponent implements AfterViewInit { 
constructor(public profileData: ProfileData, public profileService:  ProfileService) { 
    } 

@ViewChild('grades') grades: ElementRef; 
@ViewChild('subjects') subjects: ElementRef; 

ngAfterViewInit() { 
    jQuery(this.grades.nativeElement).tagsinput(); 
    jQuery(this.subjects.nativeElement).tagsinput(); 
} 

addProfile(profile: any, event: Event) { 
    event.preventDefault(); // because of https://github.com/angular/angular/issues/9936 
    this.profileService.postUserProfile(profile); 
} 



} 

addProfile方法のいずれかのみのユーザー名と電子メールまたは等級を取得します。 ここに私のDataModelがあります。

フォームへの追加を変更する必要が

import { Injectable, Inject } from '@angular/core'; 

@Injectable() 
export class ProfileData { 

    public UserName: string; 
    public UserEmail: string; 
    public Subjects: string[]; 
    public Grades: string[]; 
} 

Answer 1

私はtagsinputプラグインのControlValueAccessorを実装します：

export const TAGS_INPUT_VALUE_ACCESSOR: any = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => TagsInputValueAccessor), 
    multi: true 
}; 

@Directive({ 
    selector: 'input[tagsinput]', 
    providers: [TAGS_INPUT_VALUE_ACCESSOR] 
}) 
export class TagsInputValueAccessor implements ControlValueAccessor { 
    onChange = (_: any) => { }; 
    onTouched =() => { }; 

    $elem: any; 

    constructor(private _elRef: ElementRef) { 
    this.$elem = jQuery(this._elRef.nativeElement); 
    } 

    writeValue(value: any): void { 
    this.$elem.val(value).tagsinput('removeAll'); 
    this.$elem.tagsinput('add', value); 
    } 

    ngAfterViewInit() { 
    this.$elem.on('change', (x: any) => this.onChange(x.target.value)).tagsinput() 
    } 

    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 
    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 
} 

Plunker Example

Answer 2

（提出）

<form #f="ngForm" (submit)="addProfile($event)"> 
     .....