FormGroupがFormBuliderで解決しない

Question

私は角度2を使用しており、FormBuilderとFormGroupを使用しています。フォームの提出時にFormGroup型のフォームを渡しています。

私のプロパティにアクセスし、liteサーバーを再起動するとき、アプリケーションを起動せず、userNameプロパティがFieldGroupに定義されていないという例外がスローされます。

コードスニペットは、次のとおりです。

import { Component } from '@angular/core'; 
import { FormBuilder,FormGroup} from '@angular/forms'; 
import { LoginService } from '../../services/login.service'; 

@Component({ 
    selector: 'login-selector', 
    templateUrl: './app/components/login/login.component.html', 
}) 

export class LoginComponent { 

    form:FormGroup; 


    constructor(
     private formBuilder:FormBuilder){ 

    } 
    ngOnInit() { 
     this.form=this.formBuilder.group({ 
      userName:this.formBuilder.control(''), 
      password:this.formBuilder.control(''), 
      remember:this.formBuilder.control(''), 
      textCaptcha:this.formBuilder.control('') 
     }); 
    } 
onSubmit(loginForm:FormGroup){ 
     alert(`UserName is `+loginForm+` 
      and password is `+loginForm); 
    } 
} 

HTML

<form id="loginform" class="form-horizontal" role="form" [formGroup]="form" (ngSubmit) = "onSubmit(form.value)"> 

<div style="margin-bottom: 25px" class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
     <input id="password" ngModel type="password" class="form-control" name="password" placeholder="password" formControlName="password"> 
    </div> 
<div class="col-sm-12 controls"> 
    <button type="submit" class="btn btn-primary">Login </button> 
    <a id="btn-login" href="#" (click)="reset()" class="btn btn-warning">Reset </a> 
    </div> 

アラートを追加するとプロパティは機能しますが、サーバーを再起動するときにエラーがスローされ、プロパティを削除する必要があります。だから私は、フォームが

alert(`UserName is `+loginForm.userName+` 
      and password is `+loginForm.password); 

エラー値使用することはできませんよ

app/components/login/login.component.ts(50,34): error TS2339: Property 'userName 
' does not exist on type 'FormGroup'. 

Answer 1

はこれを試してみてくださいされています

{ 
    userName: "asdfasdf", 
    password: "asdfas" 
} 

Answer 2

： loginForm.value.userName

loginForm.valueのようなすべてのプロパティを持つオブジェクトが含まれています

私は、インターフェイスを作成し、機能

interface User{ 
    userName:string, 
    password:string, 
    textcaptcha:string, 
    remember:boolean 
} 

onSubmit(loginForm:User){ 
     alert(loginForm.userName); 
    } 

を提出し、サーバーを再起動して形成するためのインタフェースの参照は、私はあなたが適切値にアクセスしているとは思わない