javascript - 如果响应式(Reactive)表单字段无效 Angular 5，则禁用兄弟按钮

Question

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

形成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;

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

我不太确定该怎么做。我考虑过将 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>