最初输入字段不是强制性的但仍然禁用提交按钮? [英] 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

With that change, isCommentMandatory() will run after store.select

更多:

SwitchMap - Rxjs

这篇关于最初输入字段不是强制性的但仍然禁用提交按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！