Angular2:할 수 있't 묶'formGroup'기 때문이 아't 알려진 속'양식'

나는'm 새로운 각도 2 내가 만들려고 반응 양식을 하지만 나는 몇 가지 문제가 있습니다. 후에 많은 검색에 스택이 나는 발견없는 솔루션입니다.

여기에 당신이 볼 수있는 내류

코드:

View: 

<main>
    <div class="container">
        <h2>User data</h2>
        <form [formGroup]="userForm">
            <div class="form-group">
                <label>name</label>
                <input type="text" class="form-control" formControlName="name">
            </div>
            <div class="form-group">
                <label>email</label>
                <input type="text" class="form-control" formControlName="email">
            </div>
            <div class="" formGroupName="adresse">
                <div class="form-group">
                    <label>Rue</label>
                    <input type="text" class="form-control" formControlName="rue">
                </div>
                <div class="form-group">
                    <label>Ville</label>
                    <input type="text" class="form-control" formControlName="ville">
                </div>
                <div class="form-group">
                    <label>Cp</label>
                    <input type="text" class="form-control" formControlName="cp">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</main>

내 모듈이 있습니다.ts

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ContactComponent } from './contact.component';
import { FormGroup , FormControl , ReactiveFormsModule , FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    NgModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    FormGroup,
    FormControl
  ],
  declarations: [
    ContactComponent
  ]
})
export class ContactModule {}

와 나의 구성 요소입니다.ts

import {Component} from '@angular/core';
import { FormGroup , FormControl } from '@angular/forms';

@Component({
  selector: 'contact',
  templateUrl: './contact.component.html'
  // styleUrls: ['../../app.component.css']
})
export class ContactComponent {

    userForm = new FormGroup({
        name: new FormControl(),
        email: new FormControl(),
        adresse: new FormGroup({
            rue: new FormControl(),
            ville: new FormControl(),
            cp: new FormControl(),
        })
    });
}

I don't 을 이해 내기 때문에 오류가 가져올의 ReactiveForm 은 여기에 있습니다. 그래서...i need your help:)감사

후에는 내가 읽기 당신의 답변과 refactoring 내 코드,그's 확인합니다. 문제는 내가 가져오는 반응성에서 모듈 모듈의 내 페이지의 연락처고 가져오는 이 모듈에서의 내용. 그래서 주셔서 감사합니다 많은 관심이:)

이 대답을 도울 사람이 다른 사람들입니다.

Cyril
편집된 질문6일 4월 2017 в 9:26
프로그래밍
angular
6일 4월 2017 в 7:46
아직 보기가 없습니다.
질문에 대한 의견 (8)
해결책

내가 생각하는 것 이것은 오래된 오류에 당신을 해결하기 위해 노력하여 가져오는 일이라는 것에서 모듈 그리고 지금은 코드를 컴파일되지 않습니다 더 이상입니다. 하는 동안 당신이't 주의 쉘 출력에 브라우저에 다시,당신은 여전히 같은 오류가 있습니다.

모듈어야 한다:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ContactComponent
  ]
})
export class ContactModule {}
n00dl3
편집된 답변6일 4월 2017 в 8:34
해설 (8)

보십시오

<양식 formGroup="사용자 정의 폼">

대

<form[formGroup]="사용자 정의 폼">

해설 (0)

를 추가하려고 하 ReactiveFormsModule 에서 당신의 구성 요소뿐만 아니라.

import { FormGroup, FormArray, FormBuilder,
          Validators,ReactiveFormsModule  } from '@angular/forms';
sf_
편집된 답변7일 7월 2017 в 10:59
해설 (0)

사람들을 위해 여전히 어려움을 겪고 오류가 있는지 확인,당신은 또한 수입 ReactiveFormsModule 에서 당신의 구성 요소는's 모듈이 있습니다.ts 파일

을 의미하는 것이 가져오는 당신의 ReactiveFormsModule 습니다.모듈입니다.ts 도에mycomponent.모듈입니다.ts파일

해설 (0)

나는 그것을 해결해서 가져오기 FormModule 에 공유합니다.모듈 가져와 공유됩니다.모듈에는 모든 다른 모듈을 사용합니다. 나의 경우 FormModule 에서 사용되는 여러 모듈이 있습니다.

해설 (0)

Don't사용자 정의 폼=new FormGroup()

이용약=new FormGroup()`대신 합니다.

고서 양식을 사용하여<form[formGroup]="양식">...</양식>. 그것이 나를 위해 각 6

Hategekimana Ernest
편집된 답변17일 9월 2018 в 6:47
해설 (1)

가 동일한 문제가 해결된 다른 방법으로 문제 없이 가져오기 ReactiveFormsModule. 당신이 될 수 있지만 이 블록에 `` ngOnInt(){

사용자 정의 폼=new FormGroup({ 이름:새로운 FormControl(), 이메일:새로운 FormControl(), adresse:새로운 FormGroup({ rue:새로운 FormControl(), 빌:새로운 FormControl(), cp:새로운 FormControl(), }) }); ) ``

Nasser Albelbeisi
편집된 답변23일 4월 2019 в 6:53
해설 (0)