Angular 禁用无效表单上的提交按钮

我想禁用我的提交按钮，只要没有选择值。问题是，下拉列表的数量是从数据库中动态创建的，所以我可能有两个列表每月和每年

或可能有三个月、一年、公司等

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>

{{control.DropDownTitle}}：
挑选
{{controlList.Value}
提交值

试试这个：

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

提交值

不要忘记根据需要标记您的选择

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

试试这个：

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

提交值

不要忘记根据需要标记您的选择

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

---

当您在表单中使用Angular2时，您需要在您的typescript文件中取消验证，例如在您的代码中：

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>

---

*您可以在html中复制一些内容。

当您在表单中使用Angular2时，您需要在您的typescript文件中取消验证，例如在您的代码中：

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>

---

＊您在HTML中使用了一些.html／，然后您可能需要考虑动态窗体：然后您可能需要考虑动态窗体：