html - 如何在不使用表单组的情况下禁用 Angular 2 中的按钮

Question

I just need to enable the button if all the forms is filled and disable it if not

**这是我的代码:**

<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">
	          <div class="col-md-6">
	               <label>Start Time:</label>
	               <timepicker [(ngModel)]="start_time" [showMeridian]="ismeridian" formControlName="start_time" ></timepicker>
                <button type="button" class="btn btn-info" (click)="toggleMode()">12H / 24H</button> 
	          </div>
	          <div class="col-md-6">
	                <label>End Time:</label>
                 <timepicker [(ngModel)]="end_time" [showMeridian]="ismeridian" formControlName="end_time" ></timepicker>
	          </div>
          </div>  
        </div>

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

but [disabled]="!OvertimeForm.valid" is not working I use different package like time picker and select 2, they have their own function in getting their values

this is the code in my component

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

试试这个，

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