각도 4 모달에서 양식 값 가져 오기

양식을 제출할 때 모달에서 양식 값을 가져 오는 데 문제가 있습니다. 로그에 addMountForm이 정의되지 않았다고 나와 있습니다. 내 HTML뿐만 아니라 구성 요소의 코드 스 니펫을 제공했습니다. 도와 주셔서 감사합니다.각도 4 모달에서 양식 값 가져 오기

<ng-template #content let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Add Mount Point</h3> 
    </div> 
    <div class="modal-body"> 
     <form (ngSubmit)="onSubmit()" #addMountForm="ngForm" > 
     <div class="form-group"> 
      <label class="col-sm-2 control-label text-nowrap" 
       for="archiveOrigin">Archive Origin</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" ngModel id="archiveOrigin" name="archiveOrigin" placeholder="Archive Origin"/> 
      </div> 
     </div> 

       <button type="submit" class="btn btn-default">Add</button> 

     </form> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" (click)="c('Close click')"> 
     Close 
     </button> 
    </div> 
</ng-template> 
<div class="page pt-2"> 

</div> 


@Component({ 
    selector: 'mount-point', 
    templateUrl: './mountpoint.component.html', 
    styleUrls: ['./mountpoint.component.scss'] 
}) 
export class MountPointComponent implements OnInit { 

@ViewChild('addMountForm') addMountForm : NgForm; 

    constructor(
    private modalService: NgbModal 
){} 




    open(content) { 
     this.modalService.open(content).result.then((result) => { 
     console.log("closed"); 
     }, (reason) => { 
     console.log("dismissed"); 
     }); 
    } 

    onSubmit(){ 
    console.log("adding form values "); 
    console.log(this.addMountForm); 
} 

}

출처

2017-05-05 rvd

양식을 제출할 때 모달 팝업이 닫히지 않습니까? 아니면 여전히 열린 상태로 유지됩니까? –

어떤 버전의 모달을 사용하고 있습니까? 이 하나? https://github.com/shlomiassaf/angular2-modal – JGFMK

사용 [(ngModel)]="value" 대신 혼자 ngModel.
변경 (ngSubmit)="onSubmit()"(ngSubmit)="onSubmit(addMountForm)"

에와 구성 요소
```
onSubmit(form: NgForm){ 
    console.log(form.value); 
} 
```

출처

2017-05-05 00:32:07 digit

방금 시도했지만 여전히 addMountForm에 대해 '정의되지 않음'이 표시됩니다. – rvd

주 구성 요소에 FormsModule을 이미 가져 왔습니까? – digit

예, 필요한 수입이 있습니다. – rvd

1) 가져 오기 NgForm

import {NgForm} from '@angular/forms';

2)이

에 양식 정의를 변경

<form (ngSubmit)="onSubmit(addMountForm)" #addMountForm="ngForm" >

3)이 작동 할이

import { Component, OnInit } from '@angular/core'; 
import {NgForm} from '@angular/forms'; 
@Component({ 
    selector: 'mount-point', 
    templateUrl: './mountpoint.component.html', 
    styleUrls: ['./mountpoint.component.scss'] 
}) 
export class MountPointComponent implements OnInit { 

    constructor(
    private modalService: NgbModal 
){} 

ngOnInit(){ 

    } 

    open(content) { 
     this.modalService.open(content).result.then((result) => { 
     console.log("closed"); 
     }, (reason) => { 
     console.log("dismissed"); 
     }); 
    } 

    onSubmit(addMountForm: NgForm){ 
    console.log("adding form values "); 
    console.log(addMountForm.value); 
} 

}

에 구성 요소를 변경하고 모든 형태의 값을 포함하는 콘솔 개체를 얻을 것이다.

출처

2017-07-18 06:31:13 collinx

코드가 정확합니다. 다른 사람들은 양식이 템플릿 안에 들어 있기 때문에 양식을 onSubmit 메서드를 통해 전달해야한다고 말했기 때문에 @ViewChild를 사용하여 양식에 액세스 할 수 없습니다.

Plunker

onSubmit(form){ 
console.log("adding form values "); 
console.log(form.value.archiveOrigin); 
}

또한, 당신은 당신이 바인딩을 사용하지 않으려면 ngModel에 대한 바나나 상자 [()]를 사용할 필요가 없습니다.

this 템플릿 기반 디자인과 모델 중심 디자인을 비교하는 것이 좋습니다.

출처

2017-07-24 09:10:58

각도 4 모달에서 양식 값 가져 오기

답변

관련 문제