Is there any way to determine which fields are making a form invalid?

Is there any way to determine which fields are making a form invalid?

Asked on October 23, 2018 in AngularJs.
Add Comment


  • 7 Answer(s)

    In Associate in Nursing AngularJS application, within a controller, that is named from Associate in ng-submitoperate, that belongs to a type with name profileForm:

    $scope.updateProfile = function()
    //etc.
    };
    
    Answered on October 23, 2018.
    Add Comment

      we can loop through form.$error.pattern.

    $scope.updateProfile = function()
    {
      var error = $scope.profileForm.$error;
      angular.forEach(error.pattern, function(field)
    {
        if(field.$invalid)
    {
          var fieldName = field.$name;
          ....
        }
      });
    }
    

      using the above code we can check which fields are making a form invalid

    Answered on October 23, 2018.
    Add Comment

    Do not forget to add name property to the fields in the form

    if (frm )
    {
      disable = frm.$invalid;
      if (frm.$invalid && frm.$error && frm.$error.required)
    {
        frm.$error.required.forEach(function (error)
    {
          disableArray.push(error.$name + ' is required');
        });
      }
    }
    if (disableArray.length > 0)
    {
      vm.disableMessage = disableArray.toString();
    }
    

    the codes at above can be used to Determine which fields are making a form invalid

    Answered on October 23, 2018.
    Add Comment

    This is the simplest way to disable any button if invalid fields in the  form are  detected:

    <!-- index.html -->
    ...
    <!-- SUBMIT BUTTON -->
    <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
    ...
    
    Answered on December 14, 2018.
    Add Comment

    Using this code we can  check if the fields entered are true or valid or not:

    <form [formGroup]="form">
    <input placeholder="Enter your email" formControlName="email"/>
    <button type="submit" [disabled]="form.invalid">SEND</button>
    <div *ngIf="form.get('email').pending">
    <img src="loader.gif" >
    </div>
    </form>
    
    Answered on December 14, 2018.
    Add Comment

    Each input name‘s validation information is exposed as property in form‘s name in scope.

    HTML

    <form name="someForm" action="/">
        <input name="username" required />
        <input name="password" type="password" required />
    </form>

    JS

    $scope.someForm.username.$valid
    // > false
    $scope.someForm.password.$error
    // > { required: true }

    The exposed properties are $pristine, $dirty, $valid, $invalid, $error.

    If you want to iterate over the errors for some reason:

    $scope.someForm.$error
    // > { required: [{$name: "username", $error: true /*...*/},
    //                {$name: "password", /*..*/}] }

    Each rule in error will be exposed in $error.

    Answered on February 14, 2019.
    Add Comment

    in component:

    formData.form.controls['email'].setErrors({'incorrect': true});
    

    and in html:

    <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"  #email="ngModel">
    <div *ngIf="!email.valid">{{email.errors| json}}</div>
    Answered on February 22, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.