FormGroup не разрешается с помощью FormBulider

Я использую угловой 2 и застрял в использовании FormBuilder и FormGroup. При подаче формы передаю форму. Значение, которое будет типа FormGroup.FormGroup не разрешается с помощью FormBulider

Когда я собираюсь получить доступ к своим свойствам и перезапустить 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, свойство работает, но при перезапуске сервера он выдает ошибку и должен удалить свойство. Поэтому я не могу использовать значения формы

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'.

источник

2017-01-18 user2748108

Я не думаю, что вы обращаетесь значение правильно. Попробуйте что-то вроде 'this.loginForm.get ('userName')' или 'this.loginForm.get ('userName'). Value'. Или даже 'this.loginForm.controls.userName', или' this.loginForm.controls.userName.value'. –

Попробуйте это: loginForm.value.userName

loginForm.value содержит объект со всеми свойствами, как:

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

источник

2017-01-18 23:02:41

Я решил проблему, создав интерфейс и передав ссылка интерфейс для формирования представить функцию

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

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

и перезапуск сервера не бросать какие-либо ошибки в настоящее время

источник

2017-01-18 23:11:20 user2748108

FormGroup не разрешается с помощью FormBulider

ответ

Смежные вопросы