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

Question

I have a component with a reactive form in it like so...

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>

and in my 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
);
}

Now I have a separate page (app.component.html) like so

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

Now basically I want to disable the send button until the form in the app form component is valid.

I'm not entirely sure how to do this. I thought about storing a valid event on a shared server but I'm not sure how I can store a valid event in a service. I saw that with non-reactive forms you can just have a button that uses the same ngModel but once again not sure if that would work in this case.

Any help would be appreciated!

EDIT

I have tried [disabled]="form.invalid" and [disabled]="!isValid()" but I am still able to click the button

I have also tried using [disabled]=!form.isValid() and [disabled]=!form.form.isValid()

Thanks

Answer 1

You are really close. Here is the only thing you need to add:

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

Answer 2

In form component you could define an event @Output formValid = new EventEmitter().

Then you can listen to changes in input fields (on keypress or so) and on any change check the validity and if the form is valid, emit an event: formValid.emit().

In the app component define formIsValid = false, and on the app-form element you can listen to the formValid event: < app-form (formValid)="formIsValid = true"> (or some function in app.component.ts instead of the inline code).

And finally on button < button [disabled]="!formIsValid">