禁用提交無效形式

按鈕，我想禁用我只要值不THD是被動態地從數據庫中創建下拉菜單的數量問題，選擇提交按鈕，所以我可能有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>

來源

2017-02-27 rgoal

那麼你可能要考慮動態表單：https://angular.io/docs/ts/latest/cookbook/dynamic-form.html –

當您使用Angular2與形式，你需要在你的打字稿文件decleare驗證，例如你的代碼不要忘記，以紀念您選擇：

的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上添加了一些內容。

來源

2017-02-27 06:05:30

試試這個：

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

來源

2017-02-27 03:08:45 mickdev

哇非常簡單，非常感謝你 – rgoal

歡迎您;） – mickdev

忘記需要，謝謝:) – Johansrk

禁用提交無效形式

回答

相關問題