angular4 - disable form when input is empty or value less than 1

angular 6 disable input on condition
disable form control angular 4
angular input validation without form
angular form validation
angular 4 form validation on submit
angular reactive forms
angular form validation child component
angular reactive forms validation

I'm validating forms in an angular project which is working as it should. But i'm trying to go a step further by disabling the form when a value in a particular textfield noWards is less than 1

Textbox

  <input autocomplete="off" class="input100" type="text"   formControlName="noWards" [(ngModel)]="noWards" >

Button

    <button
    [disabled]="!questionsForm.valid || noWards.length < 3"
    [ngClass]="{'default':!questionsForm.valid}"
    (click)="goToNextStep()" class="contact100-form-btn">
      <span>
        Start
        <i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
      </span>
    </button>

JS

  this.questionsForm = this.formBuilder.group({
            new: ['', Validators.required],
            noWards: ['', Validators.required],
            user: [''],
            pass: ['', Validators.required]
          });

Instead the form, you could disable the inputs form, actually this is not a good strategy, because a malicious user can overwrite such property from the DOM.

So, a better approach is to remove the inputs form and append to the DOM any content tag (<span>, <p>, ...).

example:

<input *ngIf="isEditable" type="text" ... [(ngModel)]="Name">
<span *ngIf="!isEditable"> {{Name}} </span>

angular4, Instead the form, you could disable the inputs form, actually this is not a good strategy, because a malicious user can overwrite such property from the DOM. This post will explore how to disable a form based on the input value of another form field in an Angular application. This is particularly useful if you are using Angular’s Reactive Forms to handle user input, validation and model building before submitting to an endpoint.

You can do this with (ngModelChange) event:

HTML Code:

<form [formGroup]="questionsForm">
    <input autocomplete="off" class="input100" type="text"   formControlName="noWards" [(ngModel)]="noWards" (ngModelChange)="isValid(noWards)" required>
<button
    [disabled]="!questionsForm.valid || isInputValid === false"
    (click)="goToNextStep()" class="contact100-form-btn">
    Test
    </button>
 </form>

In TS:

Add one property:

isInputValid: boolean = false;

isValid() as:

isValid(data) {
    var valid = /^([0-9]*[1-9][0-9]*)$/.test(data);
    if (valid) {
      this.isInputValid = true
    }
    else {
      this.isInputValid = false;
    }
  }

The [disabled] property condition:

[disabled]="!questionsForm.valid || isInputValid === false"

Working Stackblitz Example

Angular 4 Forms: Nesting and Input Validation, angular4 - disable form when input is empty or value less than 1. angular 7 form validation angular input validation without form angular reactive forms validation This directive sets the disabled attribute on the element (typically a form control, e.g. input, button, select etc.) if the expression inside ngDisabled evaluates to truthy. A special directive is necessary because we cannot use interpolation inside the disabled attribute. See the interpolation guide for more info.

As you are working with reactive forms, you should use custom validators to validate your field.

Also, you can use type="number" in your input field to make ensure only number in entered in that field.

In your ts file you create custom validator function as follows:

  validatenoWards(control: FormControl) {
    if (control.value<1) {
      return { inValid: true };
    }
    return null;
  }

Custom validator should return null if control value is valid or else, it should return any object as in the function above. And then in the form group, use it as:

this.questionsForm = this.formBuilder.group({
            new: ['', Validators.required],
            noWards: ['', [this.validatenoWards,Validators.required]]],
            user: [''],
            pass: ['', Validators.required]
          });

And then to keep your button disabled while noWards is less than 1, simply user the disabled attribute of form valid condition as below:

<button
    [disabled]="!questionsForm.valid"
    (click)="goToNextStep()" class="contact100-form-btn">
    Test
    </button>

You can perform any logic in the custom validator to check if the input field is valid. You can also show custom messages based on the validity. For more on custom validators, see : Creating a Custom Validator.

Angular, With validator directives, working with Angular 4 forms is easy. birthYear - should be a valid number and the user must have at least 18 and less than 85 years be at least one phone number, and the user is allowed to add a new or remove an Once this is done, we can access the values of all input controls and extend  The ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea). The form field will be disabled if the expression inside the ng-disabled attribute returns true. The ng-disabled directive is necessary to be able to shift the value between true and false.

If you are talking about the string lengthof the field noYards, you can use the Validator Class that come from the Reactive Form Module via Validators.minLength() or Validators.maxLength() like this:

this.questionsForm = this.formBuilder.group({
            new: ['', Validators.required],
            noWards: ['', Validators.minLength(1)],
            user: [''],
            pass: ['', Validators.required]
          });

Disable button if formgroup is invalid, Why write a blog post about disabling a form, you think? It couldn't be more easy than calling the disable method on the form control email: {value: null, disabled: true} The reason for this is that there isn't something like a disabled attribute on a form tag as there is on an input. So back to square one. Reactive-forms in Angular is very powerful to handle changes in value, check the statuses, and perform validations on a form-field in particular form because of supporting FormGroup, FormControl

Template syntax, These validators are run one after another on every change of the input-value. How to Create Your First Angular Reactive Form Using FormGroup class. Why write a blog post about disabling a form, you think? email: {value: null, again comes down to less than 12 , the Button control should again be Disabled Jul 07,​  The issue here that validationFn, which I use to build the form control, must return a function, that can get only form control, means no input, the input can be defined in the closure, but can

Angular ng-minlength Directive, Begin with the first form of data binding—interpolation—to see how much Angular replaces that name with the string value of the corresponding component property. src/app/app.component.html (template input variable) If you reference a name that belongs to more than one of these namespaces, '​disabled' : null">. Build an Angular form with a component and template. Use ngModel to create two-way data bindings for reading and writing input-control values. Track state changes and the validity of form controls. Provide visual feedback using special CSS classes that track the state of the controls. Display validation errors to users and enable/disable form

Angular Validators With Conditional Validation In Reactive Forms , The ng-minlength directive will add an "invalid" state of the input field if the length of the value is less than specified. Note: If the value is empty, it is considered  If the value of the max attribute isn't a number, then the element has no maximum value. This value must be greater than or equal to the value of the min attribute. min. The minimum value to accept for this input. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a

Comments
  • Other HTML Code?
  • I downvoted because your mix-in ReactiveForm and TemplateForm (If you're using a ReactiveForm, NOT use [(ngModel)]). To validate ReactiveForm you must use Validators
  • Yes exactly I have also took time to do that but its accepting values like 000