基于表单无效的Angular 8按钮禁用答案

【问题标题】：Angular 8 button disable based on form invalid基于表单无效的Angular 8按钮禁用
【发布时间】：2019-12-12 16:22:45
【问题描述】：

我是 Angular 的新手，我在 8 年工作。

我尝试了以下方法来禁用提交按钮。我有一个父组件request.html，这里我使用如下代码，

<div i"parent">
<form #heroForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" required [(ngModel)]="vname" name="name" #name="ngModel" #spy>

    <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div>

    <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid || spy.className.invalid">Submit</button>
  </div>
</form>
</div>

如果文本框为空，它会按预期禁用提交按钮。这不是问题

现在我在request.html中使用其他子组件注入，如下

<form #heroForm="ngForm">
    <div id="parent">
        <app-child>  </app-child>
    </div>
    <button type="submit" class="btn btn-success"
      [disabled]="!heroForm.form.valid || spy.className.invalid">Submit</button>
</form>

我的孩子 html 如下所示，

<div id="child-template">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" required [(ngModel)]="vname" name="name" #name="ngModel" #spy>

    <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div>
  </div>
</div>

这里我的输入文本框在子 html 中，我想禁用父 html 中的保存按钮，它不起作用并且保存按钮始终启用。

我这里有什么遗漏吗？

【问题讨论】：

可以添加你的子ts文件吗？
是的，使用 CLI 生成时添加的所有内容
在此处显示您孩子的 ts 代码

标签： angular

【解决方案1】：

您可以找到完整的工作StackBlitz Link

您必须使用 @Output() 和 @ViewChild() 装饰器将表单状态从子级发送到父级。您的 app.component.html 是...submitValidator 只是来自子组件。

<div id="parent">
    <app-child (submitValidator)="onSubmitValidator($event)">  </app-child>
</div>

您的 child.component.ts 是...

这里，@ViewChild() 用于从模板中获取表单状态，这里你使用过#name=ngModel

@Output() submitValidator = new EventEmitter();
@ViewChild ('name', {static:false}) formValidator;

ngOnInit() {
    this.submitValidator.emit(false);
}
onChange(value){
    this.submitValidator.emit(this.formValidator.valid)
}

您的 chil.component.html 是...

 <input type="text" class="form-control" (ngModelChange)="onChange()" 
        id="name" required [(ngModel)]="vname" name="name" 
        #name="ngModel" #spy
 >

【讨论】：

谢谢，对我来说按钮已禁用。即使在提供输入后，在 5 个字符后也只会隐藏错误消息并禁用按钮。
没有正确理解您要说的有关问题的内容？你检查过上面的 stackblitz 链接了吗？
我更新了stackblitz stackblitz.com/edit/angular-vsapi6?embed=1&file=src/app/…
我正在使用 ngFor 动态生成元素，在此期间，当其中一个输入具有值时，它会启用按钮。你能帮忙吗？
能否提供网址，它只显示我最近的更改

【解决方案2】：

使用@Output 装饰器，它将发出一个事件来启用/禁用从子到父的按钮。该事件可以在输入文本框的ngModelChange事件上调用。

【讨论】：