Question

我想在没有选择值的情况下禁用我的提交按钮问题是从数据库中动态创建的下拉数量，因此我可能有2个月份和年份列表

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

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>

Answer 1

试试这个：

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

Answer 2

当你将Angular2与表格一起使用时，你需要在你的打字稿文件中取消验证，例如你的代码：

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>

typscript文件：

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

*你在你的HTML中迷惑了一些。

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

2 个答案: