角4モーダルからフォームの値を取得

Question

フォームを送信するときにモーダルからフォームの値を取得する際に問題が発生しています。ログには、addMountFormが定義されていないと表示されます。私はHTMLとコンポーネントのコードスニペットを提供しています。私はあなたの助けに感謝します。

<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); 
} 

} 

Answer 1

1. 利用[(ngModel)]="value"の代わりに、一人でngModel。

2. 変更(ngSubmit)="onSubmit()"(ngSubmit)="onSubmit(addMountForm)"

   に、部品

   onSubmit(form: NgForm){ 
       console.log(form.value); 
   } 
   

Answer 2

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); 
} 

} 

にコンポーネントを変更し、すべてのフォームの値を含むコンソール上のオブジェクトを取得します。

Answer 3

コードが正しいです。フォームがテンプレートの中にあるので、他の人があなたのフォームをonSubmitメソッドに渡す必要があると言いました。それが@ViewChildによってアクセスできない理由です。

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

Plunker

また、あなたがバインディングを使用したくない場合はngModel用バナナボックス[()]を使用する必要はありません。

​​テンプレート駆動とモデル駆動設計の比較をお勧めします。