Angular2 FormBuilder 및 중첩 된 객체 속성이 반환되지 않음

Question

저는 TypeScript 및 Angular2로 몸살을 앓고 있습니다. 중첩 된 개체 구조가있는 API로 작업하고 있습니다. 내 모델에서 API의 리소스를 미러링하고 싶습니다. 이다

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { InquireService } from './inquire.service'; 
import { Inquiry } from './inquiry'; 

@Component({ 
    selector: 'inquire-form', 
    templateUrl: './inquire-form.component.html' 
}) 
export class InquireFormComponent implements OnInit { 
    inquiryForm: FormGroup; 
    inquiry = new Inquiry; 

    constructor(
    private formBuilder: FormBuilder, 
    private inquireService: InquireService) {} 

    ngOnInit(): void { 
    this.buildForm(); 
    } 

    buildForm(): void { 
    this.inquiryForm = this.formBuilder.group({ 
     'firstName': [ 
     this.inquiry.name.first, [ 
      Validators.required, 
      Validators.minLength(2), 
      Validators.maxLength(50) 
     ] 
     ], ... 
    } 
} 

나는 내 길을 쳤을 때 내가 오류 :

Error: Uncaught (in promise): TypeError: Cannot read property 'first' of undefined 

타이프에 정의 된 모델/자원, "귀하": 같은

// inquiry.ts 
export class Inquiry { 
    name: { 
    first: string, 
    last: string 
    }; 
    email: string; 
    phone: string; 
    question: string; 
} 

내 폼 구성 요소입니다

this.inquiry.name을 기록하면 실제로는 undefined이지만 그 이유는 알 수 없습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

문제는 인 모든 Inquiry 개체의 속성이 초기화되지 않기 때문입니다. 중요한 사항 인 name이 초기화되지 않았으므로 해당 속성 (first 또는 last)에 액세스하려는 시도가 실패합니다.

어느 생성자에서 설정 :

constructor() { 
    this.name = {} as any; // too lazy to give first/last properties 
} 

또는 선언에 초기화 :

class Inquiry { 
    name = {} as { 
     first: string, 
     last: string 
    }; 
    email: string; 
    phone: string; 
    question: string; 
} 

또는 명시 적으로 선언 형식을 유지하고 형식 유추에 의존하지하려면 :

class Inquiry { 
    name: { 
     first: string, 
     last: string 
    } = {} as any; 
    email: string; 
    phone: string; 
    question: string; 
}