javascript - superior - Propagando el estado sucio de la vista a la forma que lo contiene

cómo sacar una basura del ojo

Question

Tengo un formulario principal con el siguiente marcado

 <tabset vertical="true" type="pills">
<tab ng-repeat="tab in tabsViews" select="selectView(tab.name, tab.index)"
ng-show="tab.isVisible"
class=" {{tabsViews[tab.index-1][''invalid''] ? ''invalid-tab'': ''valid-tab'' }}">
<tab-heading>{{tab.title}}</tab-heading>
</tab>
</tabset>

y el método selectView en mi controlador es el siguiente:

$scope.previousIndex = null;
$scope.selectView = function (viewName, viewIndex) {
$scope.selections.showInvoicesDetailView = false;
$scope.selections.showInvoicesView = false;
$scope.selections.showPassesView = false;
if (viewIndex) {
if ($scope.previousIndex != null && $scope.form) {
$scope.tabsViews[$scope.previousIndex - 1]["invalid"] = $scope.form.$invalid;
}
$scope.previousIndex = viewIndex;
}
if (viewName.substring(0, 9) != ''invoices.'')
$scope.selections.lastSelectedView = viewName;
else
$scope.selections.showInvoicesDetailView = true;
if (viewName == ''guestPasses'')
$scope.selections.showPassesView = true;
if (viewName == ''invoices'')
$scope.selections.showInvoicesView = true;
if ($scope.selections.isNew) {
window.console && console.log(''SelectView called with the new.'' + viewName + '' view...'');
$state.go(''new.'' + viewName);
}
else {
window.console && console.log(''SelectView called with the edit.'' + viewName + '' view...'');
$state.go(''edit.'' + viewName);
}
};

El formulario principal tiene una directiva para detectar su estado sucio y solicitar guardar los cambios. El problema es que cuando cambio algo en mi vista actual, el estado sucio de ese formulario no se propaga en esa forma principal. ¿Hay alguna forma de establecer el estado sucio de la forma principal en función del estado sucio de la pestaña (definida como la vista)?

Para entender mejor el problema, aquí está el formato de marcado principal (el que tiene pestañas):

div ng-class="{''col-md-7'': $parent.showSearch, ''col-md-11'': !$parent.showSearch}">
@Html.Partial("_EditFormHeader")
<div class="fourpanel">
<div data-sm:collapse="$parent.showForm" id="hideFrm" class="pull-left col-sm-3 sm-search-list">
<form name="guestMainForm" novalidate role="form" data-sm:dirty-check data-server:error
ng-show="$parent.showForm && !selections.justDeleted" class="ng-cloak">
<div id="guestEditForm" class="widget" data-resize:container>
<div class="widget-head">
<div class="row">
<div class="clearfix"></div>
@Labels.guest: {{currentGuest.contactPerson.firstName + '' '' + currentGuest.contactPerson.lastName}} {{ !isNew ? ''('' + currentGuest.guestNo + '')'' : '''' }}
<div class="pull-right text-right col-lg-1" style="padding-right:5px">
<i class="fa fa-angle-double-left sm-slider-button" ng-click="toggleFormVisibility()"
alt="@String.Format(Labels.hideX, Labels.account)" id="angle-left"></i>
</div>
</div>
</div>
<div class="widget-content">
<div class="scrollable widget-resize">
<div class="padd">
@Html.Partial("_EditFormAlerts")
</div>
<div class="col-lg-2 col-md-2 panel-container">
<tabset vertical="true" type="pills">
<tab ng-repeat="tab in tabsViews" select="selectView(tab.name, tab.index)"
ng-show="tab.isVisible"
class=" {{tabsViews[tab.index-1][''invalid''] ? ''invalid-tab'': ''valid-tab'' }}">
<tab-heading>{{tab.title}}</tab-heading>
</tab>
</tabset>
</div>
<div class="col-lg-8 col-md-4 panel-container">
<div data-ui-view data-autoscroll="false"></div>
<div data-ui-view="guestPasses" ng-show="selections.showPassesView"></div>
<div data-ui-view="invoices" data-autoscroll="false" ng-show="selections.showInvoicesView"></div>
</div>
</div>
</div>
<div class="widget-foot">
<div ng-show="!isNew">
<button class="btn btn-primary" ng-click="save(currentGuest)"
ng-disabled="form.$invalid || disableAction">
@Labels.save
</button>
<data-delete:button title="{{ ''@Labels.delete: '' + currentGuest.contactPerson.firstName.trim() + '' '' + currentGuest.contactPerson.lastName.trim() + '' ('' + currentGuest.guestNo +'')'' }}"
message="@String.Format(Messages.confirmDelete, Labels.guest)"
disable-action="disableAction"
delete="delete()">
</data-delete:button>
<data-cancel:button title="@Labels.unsavedChanges"
message="@Messages.unsavedChanges"
cancel="cancel()"
disable-action="disableAction"
dirty="form.$dirty">
</data-cancel:button>
</div>
<div ng-show="isNew">
<button id="btnAdd" class="btn btn-primary" ng-click="new(currentGuest)"
ng-disabled="form.$invalid || disableAction">
@Labels.add
</button>
<data-cancel:button title="@Labels.unsavedChanges"
message="@Messages.unsavedChanges"
cancel="cancel()"
disable-action="disableAction"
dirty="form.$dirty">
</data-cancel:button>
</div>
</div>
</div>
</form>
</div>
<div id="showFrm" class="sm-form-expand-button text-center col-sm-1"
ng-show="!$parent.showForm"
ng-click="toggleFormVisibility()">
<i class="fa fa-angle-double-right"></i>
<div class="panel2Label">@Labels.guest: {{ currentGuest.contact.firstName.trim() + '' '' + currentGuest.contact.lastName.trim() }} {{ !isNew ? ''('' + currentGuest.guestNo + '')'' : '''' }}</div>
</div>
<div class="col-sm-5 panel-container">
<div data-ui-view="detail" data-autoscroll="true" ng-show="selections.showInvoicesDetailView"></div>
<div data-ui-view="passDetail"></div>
</div>
</div>
</div>

Creé una nueva directiva y la agregué a mis formularios de vista:

function ($modal, $rootScope, $location, $state) {
return {
restrict: ''A'',
require: [''^form''],
//scope: {
// onOk: ''&'',
// onCancel: ''&''
//},
link: function (scope, element, attrs, controllers) {
var form = controllers[0];
window.console && console.log(form);
window.onbeforeunload = function () {
if ((form && form.$dirty) || element.hasClass(''ng-dirty'')) {
// return resourceFactory.getResource(''Messages'', ''unsavedChanges'');
if (scope.form)
{
scope.form.$setDirty();
}
}
};
}
};

Estoy depurando y puedo ver que el formulario está configurado correctamente en el formulario de mi vista y puedo acceder al formulario principal con la propiedad form. $$ parentForm. Sin embargo, no sé a qué evento debo enganchar para configurar el formulario. $$ parentForm. $ SetDirty cuando mi formulario se ensucia. Si puedes ayudarme a resolver esto, creo que funcionará para mí.

Answer 1

Cita de documentación angular en la directiva de formulario:

En Angular, las formas se pueden anidar. Esto significa que el formulario externo es válido cuando todas las formas secundarias también son válidas. Sin embargo, los navegadores no permiten anidar elementos, por lo que Angular proporciona la directiva ngForm, que se comporta de forma idéntica pero puede anidarse. Esto le permite tener formularios anidados, lo cual es muy útil cuando usa directivas de validación angular en formularios que se generan dinámicamente con la directiva ngRepeat. Como no puede generar dinámicamente el atributo de nombre de los elementos de entrada mediante la interpolación, debe ajustar cada conjunto de entradas repetidas en una directiva ngForm y anidarlas en un elemento de formulario externo.

Quizás esto también funcione para el estado $dirty modo que si un formulario secundario es $dirty el formulario principal también será $dirty . No estoy seguro de que en su caso pueda anidar los formularios. No tengo suficiente contexto para visualizar lo que quieres lograr.

Alternativamente, puede configurar manualmente el formulario principal para que se ensucie cuando uno de esos otros formularios se ensucia. Como agregaste el código de tu formulario principal, puedo ver que no estás usando el corrector sucio incorporado desde angular. Quizás tengas una buena razón para esto, pero tal vez no sabías de su existencia. Tendrás que usar la directiva de forma angular entonces. El FormController tiene el siguiente método: $setDirty(); .

Documentación FormController

Documentación de formulario