最初输入字段不是强制性的,但仍禁用提交按钮吗? [英] Initially input field not mandatory but still submit button disabled?
本文介绍了最初输入字段不是强制性的,但仍禁用提交按钮吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我检查输入字段的有效性,如下所示.需要填写一些数据输入字段,并且应该禁用该按钮.在强制情况下,它可以正常工作(console.log->称为1).但是它调用了else部分,但按钮显示为禁用.当我在输入字段中键入并清除某些内容时,它将启用.需要一些专家帮助来解决此问题.
I check input field validation like below. Some data input field needs to be filled and the button should be disabled. In mandatory case it works fine (console.log -> called 1) .but the else part it calls, but button shows as disabled. When I type and clear something in the input field it enables. need some expert help to fix this.
isCommentMandatory(Reviews: ReviewModel[]): void {
if (Reviews.length > 0) {
console.log("called ...1 ");
this.isCommentRequired = false;
this.DetailForm = this.fb.group({
comment: [''],
rate: ['']
});
} else {
console.log("called ...2 ");
this.isCommentRequired = true;
this.DetailForm = this.fb.group({
comment: ['', Validators.required],
rate: ['']
});
}
}
并这样称呼它,
ngOnInit(): void {
this.DetailModel$.pipe().subscribe((opd => {
this.detail = opd as Detail;
const date = this.detail?.time;
const planDate = date !== undefined ? date : new Date();
//according date select reviews data
this.store.select(selectAllReviewsDetailsModel(planDate)).
subscribe(res => this.Reviews = res);
//need to call after change Details
this.isCommentMandatory(this.Reviews);
}));
}
在其绑定的html模板中,
In the html template it bind has below,
<mat-form-field>
<input matInput formControlName="comment" [type]="'text'"
[required]="isCommentRequired"
[readonly]="false" [spaced]="false">
</mat-form-field>
<at-sticky-footer>
<button *ngIf="selectedId$|async" [disabled]="!(DetailModel.valid && (DetailModel.dirty))" (click)="submit()">submit</button>
</at-sticky-footer>
推荐答案
也许如果您将代码更改为此,将会有所帮助.
Maybe If you change your code to this, will help.
ngOnInit(): void {
this.DetailModel$.pipe(
switchMap(opd => {
this.detail = opd as Detail;
const date = this.detail?.time;
const planDate = date !== undefined ? date : new Date();
//according date select reviews data
return this.store.select(selectAllReviewsDetailsModel(planDate))
})).subscribe(res => {
this.Reviews = res;
//need to call after change Details
this.isCommentMandatory(this.Reviews);
});
}
进行此更改后, isCommentMandatory()
将在 store.select
更多:
这篇关于最初输入字段不是强制性的,但仍禁用提交按钮吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文