입력 필드에 개체 바인딩 각도

Company 개체를 내 구성 요소에서 내보기로 바인딩하려고합니다. 이 AngularJS와 쉬운, 그러나 나는 각도 2.입력 필드에 개체 바인딩 각도

보기에이 작업을 수행 할 때 오류가 발생

<input type="text" class="form-control" [(ngModel)]="company.name" 
    placeholder="Company Name" required> 
<input type="text" class="form-control" [(ngModel)]="company.address1" 
    placeholder="Address Line 1" id="address1" required> 
<button class="btn btn-primary pull-right next-btn" (click)="show()">Next</button>

구성 요소 :

company: Company; 

constructor(
    private router: Router 
) { } 

ngOnInit() { } 

show() { 
    console.log(this.company); 
}

오류 :

TypeError: Cannot read property 'name' of undefined

출처

2017-11-06 Mario Dennis

무엇이 오류입니까? –

정상적으로 작동해야합니다. ngModule –

에 대한 Forms Module을 가져 왔는지 오류가 있습니다. 오류와 관련하여 도움을 요청할 때는 항상 오류를 게시하십시오. 의사에게 전화해서 "뭔가 잘못되었습니다. 어떻게 나아질 지 말해주세요."라고 말하면서 그녀가 도울 수 있기를 기대합니다 .-) – BeetleJuice

@Rahul 난 당신이 아래의 사이트를 참조하십시오 반응성 양식에 관심이 있다면, 당신은 템플릿 기반 형태의 시도

출처

2017-11-07 00:49:45

-1

하는 경우 양식에서 ngModel을 사용하는 경우 다음에서 옵션을 설정해야합니다. [ngModelOptions]="{standalone: true}" 각 컨트롤에 대해 name 특성을 설정해야합니다.

출처

2017-11-06 12:59:06 kemsky

을 작동하려면 @ 각도/형태의 모듈에서 NgForm를 가져올 수 있었다 말했듯이
https://toddmotto.com/angular-2-forms-reactive

행운을 빌어 요!

아래의 코드를 (템플릿 기반 양식) 참조로 사용할 수 있습니다.

<code> 
import { Component, NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'app', 
    template: ` 
    <form #f="ngForm" (ngSubmit)="onSubmit(f.value)"> 
     <div>Username:  <input type="text"  name="username" ngModel></div> 
     <div>SSN:    <input type="text"  name="ssn"  ngModel></div> 
     <div>Password:  <input type="password" name="password" ngModel></div> 
     <div>Confirm password: <input type="password" name="pconfirm" ngModel></div> 
     <button type="submit">Submit</button> 
    </form> 
    ` 
}) 
class AppComponent { 
    onSubmit(formData) { 
    console.log(formData); 
    } 
} 

@NgModule({ 
    imports  : [ BrowserModule, FormsModule ], 
    declarations: [ AppComponent ], 
    bootstrap : [ AppComponent ] 
}) 
class AppModule {} 

platformBrowserDynamic().bootstrapModule(AppModule); 
</code>

출처

2017-11-07 01:05:41

개체를 한 번 초기화하면됩니다.

company: Company = new Company(); // Changes 

constructor(
    private router: Router 
) { } 

ngOnInit() { } 

show() { 
    console.log(this.company); 
}

출처

2017-11-07 04:05:11

입력 필드에 개체 바인딩 각도

답변

관련 문제