如果反应表单字段无效，则禁用兄弟按钮Angular 5

Question

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

form component.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;

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

我不完全确定如何做到这一点。 我考虑过在共享服务器上存储valid事件，但我不确定如何在服务中存储valid事件。 我看到使用非反应性表单，你可以只使用一个使用相同ngModel的按钮，但再一次不确定在这种情况下是否可行。

任何帮助，将不胜感激！

编辑

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

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

谢谢

Answer 1

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

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

Answer 2

在表单组件中，您可以定义一个事件@Output formValid = new EventEmitter（）。

然后你可以听取输入字段的变化（在按键上等）和任何变化检查有效性，如果表格有效，则发出一个事件：formValid.emit（）。

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

最后在按钮<按钮[disabled] =“！formIsValid”>上