web-dev-qa-db-ja.com

親コンポーネントからフォームをリセット

子コンポーネントを含むモーダルポップアップがあるコンポーネントが1つあります。

_<modal data-backdrop="static" #modalTask (onDismiss)="modalTask.close()" [size]="'lg'">
    <modal-header>
        <h4 style="color:#fff">Add CRL Task</h4>
    </modal-header>
    <modal-body>
        <TaskComponent [isReset] ="resetForm" #tasks></crlTask>
    </modal-body>
    <modal-footer>
        <button type="button" class="btn btn-primary" (click)="onTaskClick();">Create</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modalTask.close();">Cancel</button>
    </modal-footer>
</modal>
_

これで、子コンポーネントは次のようになります。

_<form #taskForm="ngForm" name="rplForm">
 //Contains Input Controls 
</form>
_

[〜＃〜]編集[〜＃〜]

1つの解決策を得たので、子コンポーネントのngOnChanges内にリセットを配置しました。これが子コンポーネントのコードです

_taskForm: FormGroup;
@Input() isReset: boolean = false;

ngOnChanges() {
        if (this.isReset) {
              this.rplForm.reset();
        }
    }
_

現在、onTaskClick()にtaskFormを保存しており、これを実行できます。私ができないことは、子コンポーネントの下にあるフォームをリセットすることです。

reset()を使用してみましたが、使用できませんでした。親コンポーネントからこれを使用できるものはありますか？

angularmodal-dialogparent-childangular-forms
7
The Hungry Dictator

ngOnChangesで提供した更新に基づくと、テンプレート駆動型フォームを使用しているので、NgFormディレクティブを使用する必要があります。 rplFormはnot a FormGroupです。これはリアクティブフォームに属するため、ここでは必要ありません。したがって、参照したいのはtaskFormであり、それをリセットします。 rplFormはここでは冗長です。

フォームを参照できるようにするには、ViewChildをインポートしてから、フォームでresetを呼び出す必要があります。

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

//...

@ViewChild('taskForm') myForm: NgForm;

ngOnChanges() {
  if (this.isReset) {
     this.myForm.reset();
  }
}
2
AJT82

次のように入力を使用する必要があります。

親コンポーネントのTypeScriptファイル：

private resetForm:boolean = false;

親コンポーネントのhtmlファイル：

<modal data-backdrop="static" #modalTask (onDismiss)="modalTask.close()" [size]="'lg'">
<modal-header>
    <h4 style="color:#fff">Add CRL Task</h4>
</modal-header>
<modal-body>
    <TaskComponent #tasks [reset]="resetForm"></crlTask>
</modal-body>
<modal-footer>
    <button type="button" class="btn btn-primary" (click)="onTaskClick();">Create</button>
    <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modalTask.close();">Cancel</button>
</modal-footer>

子コンポーネントTypeScript：

import {Input, OnChanges} from '@angular/core';

@Input() reset:boolean = false;


ngOnChanges(){
   if(this.reset){
       //Here you can reset your form
   }
}

編集

 <form #taskForm="ngForm" name="rplForm" [formGroup]="rplForm">
   //Contains Input Controls 
 </form>
0
Nour

サブジェクトを作成し、変更イベントを親コンポーネントに渡し、子コンポーネントをリッスンします。例：

//そのためのサービスを1つ作成し、このコードを記述します

 onFormReset = new Subject<void>();

   resetForm(): void {
     this.onFormReset.next();
   }

//コンポーネント

reset(): void{
   this.service.resetForm();
}

注。サービスをコンポーネントコンストラクターに注入します

//親コンポーネントのhtml

<button type="button" class="btn btn-primary" (click)="reset();">Reset</button>

子コンポーネント

 ngOnInit(): void {
this.service.onFormReset.subscribe(()=>{
   reset your form here
);
}
0
Shailesh Ladumor