如何在不使用表單組的情況下禁用角度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"> <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> 

但是[disabled] =“！OvertimeForm.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>

希望這會幫助你。