Angular 用户输入文本7上的启用按钮

在这里，我使用反应式表单进行数据绑定。我在禁用和启用按钮时遇到一些问题

实际上，我最初是在为文本字段设置一些值

现在我想更新按钮应该被禁用，直到用户输入一些东西。这就像更新表中的一行

  this.firstName= "Angular"
    this.newform = this.fb.group({
        FirstName: [this.firstName, [Validators.required, Validators.minLength(1)]],
    });



<form [formGroup]="newform" >
        <mat-form-field appearance="outline" fxFlex="100%">
               <mat-label>Name</mat-label>
                 <input matInput placeholder="" formControlName="FirstName" type="text" required>
        </mat-form-field>
       <button class="btn" (click)= "onSubmit()" mat-raised-button color="primary" [disabled]="!FirstName" >Update</button>
</form>  

---

您可以在组件中创建一个getter

get hasFirstName():boolean {    
  return !!this.newform.get('dataSource').value
}

然后在模板上，添加禁用的按钮输入：

[disabled]='!hasFirstName'

---

希望有帮助

你为什么要查名字？。执行[禁用]=！newform？.get'dataSource'。改为value。首先：应该为文本设置占位符not值，并且应该对newform禁用按钮。如果newForm无效，请禁用按钮。运气不好。。你能重温一下我所做的代码吗？@Sachin Jagtap建议，因为你在表单控件上得到了一个验证，它将控制整个表单的有效性，你可以使用有效性检查[disabled]=“newform.invalid”来启用/禁用按钮最初我在组件加载时将一些值绑定到输入字段。即使我将[disabled]='newform.invalid'设置为启用，按钮也会被启用，因为它里面有值。这就像已经有值的更新操作一样。如果用户希望更新或编辑相同的文本，则按钮应启用，然后您可能希望使用脏属性或触摸属性，而不是无效属性。检查此项并尝试[禁用]=“newform.dirty”或[禁用]=“newform.toucted”