Angular.js configurando programaticamente um campo de formulário como sujo

Estou atualizando programaticamente alguns dos campos em meu formulário com um valor e gostaria de definir o estado do campo como $dirty. Fazendo algo como:

$scope.myForm.username.$dirty = true; não parece funcionar.

Existe um método $setPristineque posso usar para redefinir o estado do campo, mas não existe um $setDirtymétodo?

Então, como fazer isso?

Eu vi esta postagem https://groups.google.com/forum/#!topic/angular/NQKGAFlsln4, mas não consigo encontrar o $setDirtymétodo. Estou usando a versão 1.1.5 do Angular.

Desde AngularJS 1.3.4 você pode usar $setDirty()em campos ( fonte ). Por exemplo, para cada campo com erro e marcado como obrigatório, você pode fazer o seguinte:

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

No seu caso, $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue);resolve o problema - torna o formulário e o campo sujos e acrescenta as classes CSS apropriadas.

Para ser sincero, encontrei essa solução em nova postagem no tópico do link da sua pergunta. Funcionou perfeitamente para mim, então estou colocando isso aqui como uma resposta autônoma para torná-la mais fácil de ser encontrada.

EDITAR:

A solução acima funciona melhor para a versão Angular até 1.3.3. A partir de 1.3.4, você deve usar o método API recém-exposto $setDirty()de ngModel.NgModelController.

você terá que definir manualmente $dirtypara truee $pristinepara falsepara o campo. Se quiser que as classes apareçam em sua entrada, você terá que adicionar ng-dirtye remover manualmente as ng-pristineclasses do elemento. Você pode usar $setDirty()no nível do formulário para fazer tudo isso no próprio formulário, mas não nas entradas de formulário, as entradas de formulário não têm atualmente $setDirty()como você mencionou.

Esta resposta pode mudar no futuro à medida que devem ser adicionadas $setDirty()às entradas, parece lógico.

Se você tiver acesso ao NgModelController (você só pode obter acesso a ele por meio de uma diretiva), poderá chamar

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

Fiz um jsFiddle apenas para você que resolve esse problema. simplesmente defina $ dirty como true, mas com $timeout 0so será executado após o DOM ser carregado.

Encontre aqui: JsFiddle

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

Isto é o que funcionou para mim

$scope.form_name.field_name.$setDirty()

Você pode usar o $setDirty();método. Veja a documentação https://docs.angularjs.org/api/ng/type/form.FormController

Exemplo:

$scope.myForm.$setDirty();

Uma função auxiliar para fazer o trabalho:

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

Angular 2

Para quem quer fazer o mesmo no Angular 2, é muito semelhante, exceto pelo controle do formulário

<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
        }
    }
}

Uma pequena nota adicional à resposta de @rmag. Se você tiver campos vazios, mas obrigatórios que deseja tornar sujos, use isto:

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

Não sei exatamente por que você está tentando marcar os campos como incorretos, mas me encontrei em uma situação semelhante porque queria que erros de validação aparecessem quando alguém tentasse enviar um formulário inválido. Acabei usando jQuery para remover as .ng-pristinetags de classe e adicionar .ng-dirtytags de classe aos campos apropriados. Por exemplo:

$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();
    }
}