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

Posted 2023-02-22

【中文标题】最初输入字段不是强制性的，但仍然禁用提交按钮？

【英文标题】：Initially input field not mandatory but still submit button disabled?

【发布时间】：2020-12-20 14:54:44

【问题描述】：

我检查输入字段验证，如下所示。需要填写一些数据输入字段，并且应禁用该按钮。在强制情况下，它可以正常工作（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>

【参考方案1】：

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

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

【讨论】：

非常感谢。我会试试这个并检查它是否正常工作，

不客气。尽可能避免嵌套订阅是一个好习惯。不要忘记从 Rxjs 库中导入 switchMap

我试过了，但也一样。当我尝试清除归档按钮启用时.. 最初它禁用

你能分享一个stackblitz来重现这个问题吗？

我会尝试，但这是猪油代码库的一部分。实际上，我需要在数据加载时启用按钮，如果 -> 评论输入字段不是强制性的。强制案例按预期工作。

【参考方案2】：

删除'(DetailModel.dirty)'时问题已解决