Question

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

表单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事件：＆LT; app-form（formValid）=＆＃34; formIsValid = true＆＃34;＆gt; （或app.component.ts中的某些函数而不是内联代码）。

最后按钮＆LT;按钮[已禁用] =＆＃34;！formIsValid＆＃34;＆gt;

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

2 个答案: