我如何可以禁用角2按鈕，而無需使用表單組

Question

我只需要啓動按鈕，如果一切形式被填充，如果沒有

禁用**這裏是我的代碼： **

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form [formGroup]="OvertimeForm" (ngSubmit)="createOvertime()"> 
 
    
 
     <div class="form-group"> 
 
      <label class="control-label" for="employee" >Employee:</label> 
 
      <select2 [data]="employee" 
 
      [options]="options" 
 
      [width]="570" 
 
      [value]="employee_value" 
 
      (valueChanged)="changed($event)" 
 
      required> 
 
      </select2> 
 
     </div> 
 
     <div class="form-group"> 
 
      <div class="row"> 
 
\t   <div class="col-md-6"> 
 
\t    <label>Start Time:</label> 
 
\t    <timepicker [(ngModel)]="start_time" [showMeridian]="ismeridian" formControlName="start_time" ></timepicker> 
 
       <button type="button" class="btn btn-info" (click)="toggleMode()">12H/24H</button> 
 
\t   </div> 
 
\t   <div class="col-md-6"> 
 
\t     <label>End Time:</label> 
 
       <timepicker [(ngModel)]="end_time" [showMeridian]="ismeridian" formControlName="end_time" ></timepicker> 
 
\t   </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
     \t <div class="row"> 
 
     \t \t <div class="col-md-12"> 
 
     \t \t \t <label>Reason</label> 
 
      \t \t \t <textarea class="form-control" name="remarks" id="remarks" rows="3" placeholder="Reason ..." formControlName="remarks" required></textarea> 
 
     \t \t </div> 
 
     \t </div> 
 
     </div> 
 
     <button type="submit" class="btn btn-primary pull-right" [disabled]="!OvertimeForm.valid">Add</button> 
 
    </form>

但[禁用] =「！Overti meForm.valid」不工作 我用不同的包裝，如時間選擇器中選擇2，他們有自己的功能得到他們的價值觀

這是代碼在我的組件

this.OvertimeForm = _fb.group({ 
    'start_time':  [this.ot.start_time, [Validators.required]], 
    'end_time':   [this.ot.end_time, [Validators.required]], 
    'remarks':   [this.ot.remarks, [Validators.required]], 
    'created_by':  [this.ot.created_by, [Validators.required]] 
}); 

}

ngOnInit() { 
    this.get_employee(); 
    this.get_UserId(); 
} 



get_UserId(){ 
    this._auth_service.getUser(). 
    subscribe(
     data => { 
      let user = data; // fetched 
      this.user_id = user.id; 
      this.OvertimeForm.value.created_by = this.user_id; 
     }, 
     err => console.error(err) 
    ); 
} 

get_employee(){ 
    let employees = this._common_service.getEmployees(). 
    subscribe(
     data => { 
      this.emp = Array.from(data); // fetched record 
      this.employee = this.emp; 
      this.employee_value = []; 
      this.options = { 
       multiple: true 
      } 
      this.current = this.employee_value; 
     }, 
     err => console.error(err) 
    ); 
} 
changed(data: any) { 
    this.current = data.value; 
    this.OvertimeForm.value.employee_id = this.current; 
    this.OvertimeForm.value.start_time = moment(this.start_time).format("HH:mm:ss"); 
    this.OvertimeForm.value.end_time = moment(this.end_time).format("HH:mm:ss"); 
    // this.OvertimeForm.valid = true; 
    // console.log(this.OvertimeForm.valid); 
} 

remarks(event:any){ 
    let a = event; 
    console.log(a); 
} 


createOvertime(){ 

    let ot = this.OvertimeForm.value; 
    console.log(ot); 

    this._OTservice 
    .createOT(ot) 
    .subscribe(
     data => { 
      this.poststore = Array.from(data); 
      this.success_title = "Success"; 
      this.success_message = "A new user record was successfully added."; 
      setTimeout(() => { 
       this.close(); 
      }, 1000); 
     }, 
     err => this.catchError(err) 
    ); 
} 

private catchError(error: any){ 
    let response_body = error._body; 
    let response_status = error.status; 

    if(response_status == 500){ 
     this.error_title = 'Error 500'; 
     this.error_message = 'The given data failed to pass validation.'; 
    } else if(response_status == 200) { 
     this.error_title = ''; 
     this.error_message = ''; 
    } 
} 
//time picker 
public toggleMode():void { 
this.ismeridian = !this.ismeridian; 

} 

Answer 1

替換形式的標記線：

<form #OvertimeForm=ngForm novalidate (ngSubmit)="createOvertime()"> 

Answer 2

試試這個，

<button type="submit" [disabled]="!ngForm.valid">Submit</button> 

Answer 3

使用方法：在你的表單標籤[attr.disabled]="!OvertimeForm.valid"

Answer 4

使用novalidate。

請參閱下面的代碼以供參考。

OvertimeForm.html

<form [formGroup]="myNgForm" novalidate (ngSubmit)="saveAsConfirm(myNgForm)"> 

    ////other elements 

    <button type="submit" class="btn btn-success" [disabled]="!myNgForm.valid">Save</button>  
</form> 

希望這會幫助你。