Angular 4從模態獲取表格值

我在提交表單時遇到了模態表單值問題。日誌說addMountForm是未定義的。我提供了我的html代碼片段以及組件。我很感謝你的幫助。Angular 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訪問它的原因。

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

Plunker

而且，你不需要用香蕉箱[()]爲ngModel如果你不想使用綁定。

我建議你看看模板驅動和模型驅動設計之間的比較。

來源

2017-07-24 09:10:58

Angular 4從模態獲取表格值

回答

相關問題