Question

如果所有表单都已填满，我只需要启用该按钮，如果不是
则禁用它

**这是我的代码：**

＆＃13;

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

＆＃13;

但是 [已禁用] =＆＃34;！OvertimeForm.valid＆＃34; 无效   我使用不同的包，如时间选择器和选择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>

希望这会对你有所帮助。

如何在不使用表单组的情况下禁用角度2中的按钮

4 个答案: