Angular2-console.log를 사용하여 모델 기반 양식 데이터를 보는 방법

Pleinary

console.log this.userForm.email을 시도하는 모델 기반 양식이 있지만 다음 오류가 발생합니다. 속성 'email'이 'FormGroup'유형에 존재하지 않습니다. 누구든지 도울 수 있습니까?

app.component.html

<div class="container">
        <h2>User Data</h2>
            <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
                        <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" #refName class="form-control" formControlName="email">
                               <b>{{refName.className}}</b>
                        </div>

                        <div formGroupName="address">
                            <div class="form-group">
                                <label>Street</label>
                                <input type="text" class="form-control" formControlName="street">
                            </div>
                            <div class="form-group">
                                <label>City</label>
                                <input type="text" class="form-control" formControlName="city">
                            </div>
                            <div class="form-group">
                                <label>PostalCode</label>
                                <input type="text" class="form-control" formControlName="postalcode">
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">Submit</button>
            </form>
</div>   

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms'; // see peab olema
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
    userForm = new FormGroup({
        name: new FormControl('Brandon'),
        email: new FormControl(),
        address: new FormGroup({
        street: new FormControl(),
        city: new FormControl(),
        postalcode: new FormControl()
    })  
});
    onSubmit(){
        console.log(this.userForm.email);

    }
}
Pengyy

사용하는 this.userForm.controls.email.value대신.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

MVC : 모델 목록 (C # 양식)을 사용하여보기를 빌드하는 가장 좋은 방법

분류에서Dev

모델 데이터를 기반으로 양식 입력을 받아들이고 원본 모델 객체를 유지하는 방법은 무엇입니까?

분류에서Dev

보기의 모델에 양식 필드를 저장하는 방법

분류에서Dev

Angular2에서 현재 구성 요소의 속성 값에 따라 달라지는 사용자 지정 양식 유효성 검사기 (모델 기반)를 작성하는 방법

분류에서Dev

AJAX jQuery를 사용하여 뷰의 양식에서 모델을 반환하는 방법

분류에서Dev

Angular2-CSS ng-valid 스타일 나누기를 사용하는 모델 기반 양식

분류에서Dev

부분보기 MVC 4를 사용하여 부모 양식에서 데이터를 제출하는 올바른 방법은 무엇입니까?

분류에서Dev

codeigniter 양식을 사용하여`|`구분 기호로 여러 확인란 데이터를 보내는 방법

분류에서Dev

양식 게시시 모델 데이터를 유지하는 방법

분류에서Dev

ng2-bootstrap datepicker를 사용한 모델 기반 양식

분류에서Dev

양식을 사용하여 H2 데이터베이스에 데이터를 삽입하는 방법

분류에서Dev

Django : 양식의 비 영구 필드를 기반으로 모델 / 양식을 사용자 지정 저장하는 방법은 무엇입니까?

분류에서Dev

LINQ select를 사용하여 모델 데이터의 반환 형식을 Product 엔터티에서 ProductViewModel 개체로 변환하는 방법은 무엇입니까?

분류에서Dev

다른보기에서 CoreData를 사용하여 새 데이터를 저장할 때 모델의 다른 인스턴스를 업데이트하는 방법

분류에서Dev

Select를 사용하여 개체 속성을 Angular2 양식 항목에 바인딩하는 방법

분류에서Dev

반응 후크를 사용하여 부모에서 자식으로 데이터를 전달하는 방법

분류에서Dev

Python을 사용하여 .asc 파일 형식의 기후 모델 데이터를 읽고 / 추출하는 방법은 무엇입니까?

분류에서Dev

MVC 모델 데이터를 Angular JS 모델과 연결하는 방법

분류에서Dev

Django Forms-양식에서 별도의 모델에 데이터를 저장하는 방법이 있습니까?

분류에서Dev

Angular를 사용하여 한보기에서 다른보기로 데이터를 전달하는 방법

분류에서Dev

양식 및 기타 소스의 데이터를 모두 사용하여 모델 필드 채우기

분류에서Dev

Django에서 모델 양식을 사용하여 객체를 편집하는 방법은 무엇입니까?

분류에서Dev

Django를 사용하여 modelForm 기반을 사용하여 양식을 편집하는 방법

분류에서Dev

Ruby에서 Mechanize 또는 Faraday를 사용하여 JSON 양식 데이터를 보내는 방법

분류에서Dev

Angular 2 : 모델 기반 폼 그룹을 만들기 전에 서비스에서 데이터를로드하는 방법

분류에서Dev

Django에서 상속 된 모델 속성에 대한 일반 모델 양식 필드 유효성 검사기를 만드는 방법은 무엇입니까?

분류에서Dev

CodeIgniter를 사용하여 컨트롤러에서 모델로 데이터를 보내는 방법

분류에서Dev

C # HttpClient를 사용하여 인코딩되지 않은 양식 데이터를 보내는 방법

분류에서Dev

PHP를 사용하여 양식 데이터를 메시지로 보내는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    MVC : 모델 목록 (C # 양식)을 사용하여보기를 빌드하는 가장 좋은 방법

  2. 2

    모델 데이터를 기반으로 양식 입력을 받아들이고 원본 모델 객체를 유지하는 방법은 무엇입니까?

  3. 3

    보기의 모델에 양식 필드를 저장하는 방법

  4. 4

    Angular2에서 현재 구성 요소의 속성 값에 따라 달라지는 사용자 지정 양식 유효성 검사기 (모델 기반)를 작성하는 방법

  5. 5

    AJAX jQuery를 사용하여 뷰의 양식에서 모델을 반환하는 방법

  6. 6

    Angular2-CSS ng-valid 스타일 나누기를 사용하는 모델 기반 양식

  7. 7

    부분보기 MVC 4를 사용하여 부모 양식에서 데이터를 제출하는 올바른 방법은 무엇입니까?

  8. 8

    codeigniter 양식을 사용하여`|`구분 기호로 여러 확인란 데이터를 보내는 방법

  9. 9

    양식 게시시 모델 데이터를 유지하는 방법

  10. 10

    ng2-bootstrap datepicker를 사용한 모델 기반 양식

  11. 11

    양식을 사용하여 H2 데이터베이스에 데이터를 삽입하는 방법

  12. 12

    Django : 양식의 비 영구 필드를 기반으로 모델 / 양식을 사용자 지정 저장하는 방법은 무엇입니까?

  13. 13

    LINQ select를 사용하여 모델 데이터의 반환 형식을 Product 엔터티에서 ProductViewModel 개체로 변환하는 방법은 무엇입니까?

  14. 14

    다른보기에서 CoreData를 사용하여 새 데이터를 저장할 때 모델의 다른 인스턴스를 업데이트하는 방법

  15. 15

    Select를 사용하여 개체 속성을 Angular2 양식 항목에 바인딩하는 방법

  16. 16

    반응 후크를 사용하여 부모에서 자식으로 데이터를 전달하는 방법

  17. 17

    Python을 사용하여 .asc 파일 형식의 기후 모델 데이터를 읽고 / 추출하는 방법은 무엇입니까?

  18. 18

    MVC 모델 데이터를 Angular JS 모델과 연결하는 방법

  19. 19

    Django Forms-양식에서 별도의 모델에 데이터를 저장하는 방법이 있습니까?

  20. 20

    Angular를 사용하여 한보기에서 다른보기로 데이터를 전달하는 방법

  21. 21

    양식 및 기타 소스의 데이터를 모두 사용하여 모델 필드 채우기

  22. 22

    Django에서 모델 양식을 사용하여 객체를 편집하는 방법은 무엇입니까?

  23. 23

    Django를 사용하여 modelForm 기반을 사용하여 양식을 편집하는 방법

  24. 24

    Ruby에서 Mechanize 또는 Faraday를 사용하여 JSON 양식 데이터를 보내는 방법

  25. 25

    Angular 2 : 모델 기반 폼 그룹을 만들기 전에 서비스에서 데이터를로드하는 방법

  26. 26

    Django에서 상속 된 모델 속성에 대한 일반 모델 양식 필드 유효성 검사기를 만드는 방법은 무엇입니까?

  27. 27

    CodeIgniter를 사용하여 컨트롤러에서 모델로 데이터를 보내는 방법

  28. 28

    C # HttpClient를 사용하여 인코딩되지 않은 양식 데이터를 보내는 방법

  29. 29

    PHP를 사용하여 양식 데이터를 메시지로 보내는 방법은 무엇입니까?

뜨겁다태그

보관