disable submit button on invalid form

Question

I would like to disable my submit button as long as values are not selected thd The issues is the number of dropdowns is dynamically created from the database so I might have 2 lists month and year

or may have three month,year,company etc..

component.html

<form #myForm="ngForm" (ngSubmit)="submit(myForm.value)">

                        <div class="container" style="width:100%; border:0px double ">
                            <div class="row  left" *ngFor='let control of tabControls; let i = index' style="padding-bottom:3px">
                                <div class="col-lg-2 text-left" style="border:0px dotted">
                                    {{control.DropDownTitle}}:
                                </div>
                                <div class="col-lg-pull-3 text-left">
                                    <select name="{{control.DropDownTitle}}" [(ngModel)]="selected[i]" style="width:80%">
                                        <option value="" selected>Select</option>
                                        <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
                                            {{controlList.Value}}
                                        </option>
                                    </select>

                                    <input #myInput  name="file" type="file"   (input)="oninput($event)" style="width:80%" [disabled]='showDeleteButton' />
                                      <button type="submit" class="btn btn-primary">Submit Values</button>                              
</form>

Then you may want to consider Dynamic Forms: angular.io/docs/ts/latest/cookbook/dynamic-form.html — R. Richards
– R. Richards, Commented Feb 27, 2017 at 2:17

mickdev · Accepted Answer · 2017-02-27 03:08:45Z

3

Try this :

<button [disabled]="!myForm.form.valid" type="submit" class="btn btn-primary">Submit Values</button>

Don't forget to mark your select as required

<select name="{{control.DropDownTitle}}" [(ngModel)]="selected[i]" style="width:80%" required><!-- add required -->

answered Feb 27, 2017 at 3:08

mickdev

2,88514 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yoav Schniederman · Accepted Answer · 2017-02-27 06:05:30Z

When you are using Angular2 with forms you need to decleare the validation at your typescript file for example to your code :

The HTML :

<form [formGroup]="myForm"(ngSubmit)="submit(myForm.value)">
   <div class="container" style="width:100%; border:0px double ">
       <div class="row  left" *ngFor='let control of tabControls; let i = index' style="padding-bottom:3px">
         <div class="col-lg-2 text-left" style="border:0px dotted">
             {{control.DropDownTitle}}:
         </div>
         <div class="col-lg-pull-3 text-left">
            <select name="{{control.DropDownTitle}}" [(ngModel)]="selected[i]" style="width:80%">
                 <option value="" selected>Select</option>
                 <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
              {{controlList.Value}}
            </option>
         </select>

      <input [formControl]="myForm.controls['file']" name="file" type="file"   (input)="oninput($event)" style="width:80%" [disabled]='showDeleteButton' />
      <button type="submit" class="btn btn-primary">Submit Values</button>                              
</form>

the typscript file:

constructor(fb: FormBuilder) {
    this.myForm= fb.group({
      file: new FormControl({value: null, disabled: true}, Validators.compose([Validators.required]))
    });
  }

*you miising some at your html.

Collectives™ on Stack Overflow

disable submit button on invalid form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related