angularjs - vacios - validar formulario angular 5

Angular.js establece programáticamente un campo de formulario sucio

Question

Estoy actualizando programáticamente algunos de los campos en mi formulario con un valor y me gustaría establecer el estado del campo en $dirty . Haciendo algo como:

$scope.myForm.username.$dirty = true; no parece funcionar

Hay un método $setPristine que puedo usar para restablecer el estado del campo pero no hay un método $setDirty ?

Entonces, ¿cómo hace uno para hacer esto?

Vi esta publicación https://groups.google.com/forum/#!topic/angular/NQKGAFlsln4 pero parece que no puedo encontrar el método $setDirty . Estoy usando la versión angular 1.1.5.

Answer 1

Deberá configurar manualmente $dirty en true y $pristine en false para el campo. Si desea que las clases aparezcan en su entrada, tendrá que agregar manualmente las clases ng-dirty y remove ng-pristine del elemento. Puede usar $setDirty() en el nivel de formulario para hacer todo esto en el formulario en sí, pero no las entradas de formulario, las entradas de formulario actualmente no tienen $setDirty() como mencionó.

Esta respuesta puede cambiar en el futuro, ya que deberían agregar $setDirty() a las entradas, parece lógico.

Answer 2

Desde AngularJS 1.3.4 puede usar $setDirty() en campos ( source ). Por ejemplo, para cada campo con error y marcado requerido, puede hacer lo siguiente:

angular.forEach($scope.form.$error.required, function(field) {
field.$setDirty();
});

Answer 3

En su caso, $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue); hace el truco - ensucia tanto la forma como el campo, y agrega las clases de CSS apropiadas.

Para ser sincero, encontré esta solución en una nueva publicación en el tema del enlace de su pregunta. Me funcionó a la perfección, así que lo planteo aquí como una respuesta independiente para que sea más fácil encontrarlo.

EDITAR:

La solución anterior funciona mejor para la versión angular hasta 1.3.3. Comenzando con 1.3.4, debe usar el método de API recién expuesto $setDirty() de ngModel.NgModelController .

Answer 4

Esto es lo que funcionó para mí

$scope.form_name.field_name.$setDirty()

Answer 5

Hizo un jsFiddle solo para ti que resuelve este problema. simplemente configure $ dirty en true, pero con $timeout 0 para que se ejecute después de que DOM se haya cargado.

Encuéntrelo aquí: JsFiddle

$timeout(function () {
$scope.form.uName.$dirty = true;
}, 0);

Answer 6

No estoy seguro exactamente de por qué está tratando de marcar los campos sucios, pero me encontré en una situación similar porque quería que aparecieran errores de validación cuando alguien intentaba enviar un formulario no válido. Terminé usando jQuery para eliminar las etiquetas de clase .ng-pristine y agregar etiquetas de clase .ng-dirty a los campos apropiados. Por ejemplo:

$scope.submit = function() {
// `formName` is the value of the `name` attribute on your `form` tag
if (this.formName.$invalid)
{
$(''.ng-invalid:not("form")'').each(function() {
$(this).removeClass(''ng-pristine'').addClass(''ng-dirty'');
});
// the form element itself is index zero, so the first input is typically at index 1
$(''.ng-invalid'')[1].focus();
}
}

Answer 7

Pequeña nota adicional a la respuesta de @ rmag. Si tiene campos vacíos pero obligatorios que quiere ensuciar, use esto:

$scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue !== undefined
? $scope.myForm.username.$viewValue : '''');

Answer 8

Puede usar $setDirty(); método. Consulte la documentación https://docs.angularjs.org/api/ng/type/form.FormController

Ejemplo:

$scope.myForm.$setDirty();

Answer 9

Si tiene acceso a NgModelController (solo puede acceder a él desde una directiva), puede llamar

ngModel.$setViewValue("your new view value");
// or to keep the view value the same and just change it to dirty
ngModel.$setViewValue(ngModel.$viewValue);

Answer 10

Una función auxiliar para hacer el trabajo:

function setDirtyForm(form) {
angular.forEach(form.$error, function(type) {
angular.forEach(type, function(field) {
field.$setDirty();
});
});
return form;
}

Answer 11

Angular 2

Para cualquiera que busque hacer lo mismo en Angular 2, es muy similar, aparte de obtener la forma

<form role="form" [ngFormModel]="myFormModel" (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input autofocus type="text" ngControl="usename" #name="ngForm" class="form-control" id="name" placeholder="Name">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Name is required
</div>
</div>
</form>
<button type="submit" class="btn btn-primary" (click)="myForm.ngSubmit.emit()">Add</button>

import { Component, } from ''@angular/core'';
import { FormBuilder, Validators } from ''@angular/common'';
@Component({
selector: ''my-example-form'',
templateUrl: ''app/my-example-form.component.html'',
directives: []
})
export class MyFormComponent {
myFormModel: any;
constructor(private _formBuilder: FormBuilder) {
this.myFormModel = this._formBuilder.group({
''username'': ['''', Validators.required],
''password'': ['''', Validators.required]
});
}
onSubmit() {
this.myFormModel.markAsDirty();
for (let control in this.myFormModel.controls) {
this.myFormModel.controls[control].markAsDirty();
};
if (this.myFormModel.dirty && this.myFormModel.valid) {
// My submit logic
}
}
}