如何根据angular FormGroup中的输入字段数据可用性启用或禁用按钮？

我的表单输入字段是否为必填字段取决于API数据集。但当它是强制性的，我需要禁用按钮，直到用户输入一些值。我是一个绝对初学者的反应形式的角度。这需要一些专家的帮助

------------HTML----------------------

 <div class="a">
      <at-card *ngIf="selectedId$|async" class="b">
        <at-detail [selectedDetail]="selectedDetailModel$|async">
        </at-detail>
        <div [formGroup]="DetailForm" class="grid grid-columns-2">
          <br />
          <mat-form-field>
            <mat-label>Comment</mat-label>
            <input matInput formControlName="comment" [type]="'text'" [required]="commentRequerd">
          </mat-form-field>
        </div>
      </at-card>
      <at-sticky-footer>
        <button *ngIf="selectedId$|async" (click)="onSubmit()">submit</button>
      </at-sticky-footer> 
</div>

就这样叫它,

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

 <at-sticky-footer>
        <button *ngIf="selectedId$|async" [disabled]="!(DetailModel.valid && (DetailModel.dirty))" (click)="submit()">submit</button>
      </at-sticky-footer>

提交

---

但是现在，这两种情况都需要键入一些东西来启用按钮。

关于反应式表单的想法是单向数据流。数据从组件流向模板；当用户处理完数据后，单击“保存”，组件将再次接管

如果需要数据验证，则验证在组件中完成；如果有条件逻辑更改数据，则验证在组件中完成。如果存在行为（但没有数据或验证更改），则可以将其作为模板指令。（例如，在模板中弹出一个“this row changed”（此行已更改）视觉指示器作为高亮显示是非常好的指示）

你身体中的所有控制都是可观察的；这意味着您可以观察它们在组件中的变化并“做正确的事情”，但是您的用例非常简单，当您设置表单时，您可以做正确的事情。请注意，您可能希望推迟表单构建，直到Http.GET返回；因为这是一个异步事件；这意味着将表单构建逻辑放入http调用的闭包中

保存按钮 对于“保存”按钮，您可以使用：

因为

DetailForm

是基本组的变量名

FormGroup

is

注释

表单控件的定义中需要一个

[Validator.Required]

：

 this.DetailForm= this.fb.group({
      comment: ['', Validators.required]
  });

还需要注意的是，当您创建表单并从服务器获取数据时，您可以创建一个注释，以查看是否需要该注释

如何构造表单组和表单生成器： 谢谢你的更新；基于此，我将如何构造

组件。ts

：

constructor(private fb: FormBuilder) { }
DetailForm: FormGroup;


ngOnInit(): void {
   const dataAvailable = //this.http.get<boolean>(s =>  s);
   if (dataAvailable) { 
     this.DetailForm = this.fb.group({ 
      comment: ['', Validators.Required]
     });
   }
   else { 
     this.DetailForm = this.fb.group({ 
      comment: [''];
     })
   }
  }
   

构造函数（私有fb:FormBuilder）{}
详细表格：表格组；
ngOnInit（）：void{
const dataAvailable=//this.http.get（s=>s）；
如果（数据可用）{
this.DetailForm=this.fb.group（{
注释：[''，验证器。必填]
});
}
否则{
this.DetailForm=this.fb.group（{
评论：['']；
})
}
}

component.html

评论
提交

关于触摸的

和模糊的
的注释：
触摸
：表示控件已激活、更改和模糊；
dirty
：表示控件已激活、更改，但尚未模糊

您需要使用哪一个取决于您的用例。
这是否回答了您的问题？是的，我需要创建“构造函数（私有fb:FormBuilder）{}”？（我把它添加到我的.ts构造函数中，并写下validators.req…考虑一下内部，ngInt。它行吗？@Georage正如我所理解的，它不需要'this.commentRequerd=true；'像这样，除此之外，直接在那里添加验证也行吗？（同时删除输入字段标志中的'commentRequerd'））我添加了一些代码注释什么，我需要做什么，我尝试你的解决方案，但总是按钮disable@Geroge我使用了dirty.：）我做了一个小的开发测试，它按预期工作。非常感谢。@Geroge我用新的测试数据实现了。。但现在，按钮是禁用这两种情况：（我不能，有一个想法为什么。它启用只有我把一些东西在评论栏
 this.DetailForm= this.fb.group({
      comment: ['', Validators.required]
  });

constructor(private fb: FormBuilder) { }
DetailForm: FormGroup;


ngOnInit(): void {
   const dataAvailable = //this.http.get<boolean>(s =>  s);
   if (dataAvailable) { 
     this.DetailForm = this.fb.group({ 
      comment: ['', Validators.Required]
     });
   }
   else { 
     this.DetailForm = this.fb.group({ 
      comment: [''];
     })
   }
  }
   

<div class="a">
      <at-card *ngIf="selectedId$|async" class="b">
        <at-detail [selectedDetail]="selectedDetailModel$|async">
        </at-detail>
        <div [formGroup]="DetailForm" class="grid grid-columns-2">
          <br />
          <mat-form-field>
            <mat-label>Comment</mat-label>
            <input matInput formControlName="comment" [type]="'text'">
          </mat-form-field>
        </div>
      </at-card>
      <at-sticky-footer>
        <button [disabled]="!(DetailForm.valid && (DetailForm.touched ||  DetailForm.dirty)"  (click)="onSubmit()">submit</button>
      </at-sticky-footer> 
</div>