时间戳

首页 > 解决方案 > 最初输入字段不是强制性的，但仍然禁用提交按钮？

angular - 最初输入字段不是强制性的，但仍然禁用提交按钮？

问题描述

我检查输入字段验证，如下所示。需要填写一些数据输入字段，并且应禁用该按钮。在强制情况下，它工作正常（console.log -> 称为 1）。但它调用的 else 部分，但按钮显示为禁用。当我在输入字段中键入并清除某些内容时，它会启用。需要一些专家的帮助来解决这个问题。

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模板中，

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

标签： angulartypescriptangular-materialangular-reactive-forms

解决方案

也许如果您将代码更改为此，将会有所帮助。

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

更多：

SwitchMap - Rxjs

推荐阅读