Question

我是Angular的新手。我确实有三个选项卡：“团队详细信息”，“评估”和“报告”。从“评估”选项卡导航或移至“团队详细信息”，“报告”之类的其他选项卡后，我必须检测该表单中未保存的更改我正在使用Angular 6使用模板驱动表单。我尝试使用CanDeactivate Guard来实现这一点。但是我面临以下几个技术挑战。 1）“ Assess”选项卡是具有多个面板（我可以说大约10个）的手风琴面板，每个面板具有相同的形式。 2）这三个选项卡的逻辑已在单个组件中实现，即（TeamComponent.ts），我们将使用不带路由器链接的href移至另一个选项卡。

How to detect the unsaved changes in the above cases.


I have tried to use NgForm[] instead of NgForm , but Im not able to get the respective respective form of a panel and it is undefined. Im getting this.form[i] as undefined. Can we access them like below?

abstract get form():NgForm[];
canDeactivate():boolean{
   console.log ("Can Deactivate Form is:"+this.form);
    for (let i=0; i<= this.form.length; i++){
      console.log ("Dirtyyyy Can Deactivate Form is:"+this.form[i].dirty);
      if(this.form[i].submitted || !this.form[i].dirty){
      return this.form[i].submitted || !this.form[i].dirty
      }
    }
  }

I'm here sharing the simulated code which I tried

User-Form-component.html
 <div *ngFor="let prac of practiceScore; let i=index;">
<form #form="ngForm" (ngSubmit)="submit()">
  <label>name</label>
  <input [(ngModel)]="prac.name" name="name"/>
  <button type="submit">Submit</button>
</form>
</div> 
--------------------------------------------------------
user-form-component.ts
import { Component, OnInit ,ViewChild,HostListener} from '@angular/core';
import {FormCanDeactivate} from '../form-can-deactivate/form-can-deactivate';
import {NgForm} from "@angular/forms";

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent extends FormCanDeactivate   {

  name:string;
  practiceScore = [1,2,3,4];
  @ViewChild('form')
  form: NgForm;

  /* constructor(){
    super();
  } */
  submit(){

   console.log(this.form.submitted); 
   }
} 
---------------------------------------------------------------------
form-can-deactivate.ts
import {ComponentCanDeactivate} from '../can-deactivate/component-can-deactivate';
import {NgForm} from "@angular/forms";

export abstract class FormCanDeactivate extends ComponentCanDeactivate{


abstract get form():NgForm[];
canDeactivate():boolean{
   console.log ("Can Deactivate Form is:"+this.form);
    for (let i=0; i<= this.form.length; i++){
      console.log ("Dirtyyyy Can Deactivate Form is:"+this.form[i].dirty);
      if(this.form[i].submitted || !this.form[i].dirty){
      return this.form[i].submitted || !this.form[i].dirty
      }
    }
  }  
-------------------------------------------------------------------------
component-can-deactivate.ts
import {HostListener} from "@angular/core";

export abstract class ComponentCanDeactivate {

  abstract  canDeactivate(): boolean;



    @HostListener('window:beforeunload', ['$event'])
    unloadNotification($event: any) {
        if (!this.canDeactivate()) {
            $event.returnValue =true;
        }
    }
}
-------------------------------------------------------------




Could you please any one help me?

I would like to detect unsaved changes in the multiple forms of an accordion panel and on navigating to another tab even with hrefs.....`enter code here`

如何在动态生成的多种表单上应用脏检查

0 个答案: