如果反应式表单字段无效Angular 5，则禁用同级按钮答案

【问题标题】：Disable a sibling button if reactive form field is not valid Angular 5如果反应式表单字段无效Angular 5，则禁用同级按钮
【发布时间】：2018-03-12 22:43:42
【问题描述】：

我有一个像这样的反应形式的组件......

表单组件.html

<form [formGroup]="form" class="do-form">
    <div formGroupName="dot">
        <div class="do-form__container">
            <div class="do-form__group">
                <label for="day">Day</label>
                <input id="day" type="number" placeholder="XX" class="do-form__group__control" formControlName="day" />
            </div>
            <div class="do-form__group">
                <label for="month">Month</label>
                <input id="month" type="number" placeholder="XX" class="do-form__group__control" formControlName="month" />
            </div>
            <div class="do-form__group">
                <label for="year">Year</label>
                <input id="year" type="number" placeholder="XXXX" class="do-form__group__control" formControlName="year" />
            </div>
        </div>
        <div class="do-form__errors" *ngIf="isValid()">
            <p>Please enter a valid date</p>
        </div>
    </div>
</form>

在我的 form.component.ts

form = this.fb.group({
dot: this.fb.group({
  day: ['',
    [
      Validators.required,
      Validators.min(1),
      Validators.max(31)
    ]],
  month: ['',
    [
      Validators.required,
      Validators.min(1),
      Validators.max(12)
    ]],
  year: ['2018',
    [
      Validators.required,
      Validators.min(1918),
      Validators.max(2018)
    ]]
})
});

isValid() {
return (
  !this.form.valid &&
  this.form.get('dot.day').touched &&
  this.form.get('dot.month').touched &&
  this.form.get('dot.year').touched
);
}

现在我有一个单独的页面（app.component.html）像这样

<app-form #formTool></app-form>
        <button class="full-width-btn" (click)="next(); form.sendResult();">SEND</button>

app.component.ts

import {  formComponent } from '../form-component/form-component.ts'

export ...

@ViewChild(formComponent) form;

现在基本上我想禁用发送按钮，直到应用程序表单组件中的表单有效。

我不完全确定如何执行此操作。我曾考虑在共享服务器上存储valid 事件，但我不确定如何在服务中存储valid 事件。我看到，对于非响应式表单，您可以只使用一个使用相同 ngModel 的按钮，但再次不确定这是否适用于这种情况。

任何帮助将不胜感激！

编辑

我试过[disabled]="form.invalid" 和[disabled]="!isValid()" 但我仍然可以点击按钮

我也尝试过使用[disabled]=!form.isValid() 和[disabled]=!form.form.isValid()

谢谢

【问题讨论】：

标签： javascript angular typescript angular5

【解决方案1】：

你真的很亲密。这是您唯一需要添加的内容：

<app-form #formTool></app-form>
<button class="full-width-btn" [disabled]="!isValid()" (click)="next(); form.sendResult();">SEND</button>

【讨论】：

嘿，谢谢！但是你能告诉我这个按钮是如何知道它是否有效的吗？比如他们是如何交流的？我知道我设置了一个 viewChild 来调用 sendResult 的函数，他们是如何“说话”的？
您已经编写了可以在 HTML 中重复使用的 isValid() 函数。如果您没有编写该函数，那么您可以改用[disabled]="form.invalid" 或其他类似的东西。对form 对象及其状态的引用允许响应式表单在按钮上设置[disabled] 属性。
嘿，你说的两种方法我都试过了，我仍然可以在表单无效的情况下单击发送按钮，是不是缺少什么？
您将不得不发布更多代码以便我提供帮助，因为它应该根据您提供的代码工作。
我会更新我的问题，当我有isValid() 时，我会收到!co.isValid() is not a function error

【解决方案2】：

在表单组件中你可以定义一个事件@Output formValid = new EventEmitter()。

然后您可以监听输入字段中的更改（在按键左右），并在任何更改时检查有效性，如果表单有效，则发出一个事件：formValid.emit()。

在 app 组件中定义 formIsValid = false，在 app-form 元素上你可以监听 formValid 事件：（或 app.component.ts 中的某些函数，而不是内联代码）。

最后是按钮

【讨论】：