訪問時子窗體髒

我創建了一個掛起的更改後衛它提醒我的用戶，如果有一直形式所做的更改，並就離開了警告他們。訪問時子窗體髒

這一切都很好，但我有一個頁面上使用選擇器呈現的子組件，該組件也有一個窗體。

如何從我的警衛訪問此表格以檢查表格是否髒？

後衛：

import { CanDeactivate } from '@angular/router'; 
import { FormGroup } from '@angular/forms'; 
import { DialogService } from "ng2-bootstrap-modal"; 
import { ConfirmComponent } from '../components/confirm/confirm.component'; 
import { Inject } from '@angular/core'; 

export interface FormComponent { 
    form: FormGroup; 
} 

export class PreventUnsavedChangesGuard implements CanDeactivate<FormComponent> { 

constructor(@Inject(DialogService) private dialogService: DialogService) { } 

canDeactivate(component: FormComponent): Promise<boolean> { 

    if (component.form.dirty) { 
     return new Promise<boolean>((resolve, reject) => { 

      this.dialogService.addDialog(ConfirmComponent, { 
       title: 'Unsaved Changes', 
       message: 'You have unsaved changes. Are you sure you want to navigate away?' 
      }) 
       .subscribe((isConfirmed) => { 
        return resolve(isConfirmed); 
       }); 
     }); 
    } 

    return Promise.resolve(true); 
    } 
}

來源

2017-06-07 Stephen Errington

無論是子組件在應用程序中的其他一些地方習慣？ –

如果沒有在其他地方使用，則從子組件中移除'form'，並在子組件內使用父組件'form'。通過這種方式，如果子中的輸入字段變髒，則父母也會變髒。 –

@SameerK你可以通過使用孩子內部的父母compoent來解釋更多你的意思嗎？ –

傳遞父窗體輸入到子組件。然後，子組件需要將輸入字段綁定到該表單。如果孩子的輸入字段變髒，則父表格將變髒。因此，你不需要看守孩子的形式。例如，

父組件TS

import {FormBuilder, FormGroup} from "@angular/forms"; 
private addEmailItemForm : FormGroup; 
export class ParentComponent implements OnInit, OnDestroy { 

    constructor(private _fb: FormBuilder) {} 

    ngOnInit() { 
     this.parentComponentForm = this._fb.group({}); 
    } 
}

父組件的HTML

<child-component 
    [parentForm]="parentComponentForm" 
</child-component>

輔元件TS

export class ChildComponent implements OnInit { 
    @Input() parentForm: FormGroup;  
    let inputFieldControl = new FormControl('', Validators.required); 
    this.parentForm.addControl(this.inputFieldControlName, inputFieldControl); 
}

子組件的HTML

<input type="text" class="form-control" [formControl]="parentForm.controls[inputFieldControlName]">

來源

2017-06-07 13:42:14

訪問時子窗體髒

回答

相關問題