У меня есть компонент с реактивной формой, вот так ...

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;

Теперь в основном я хочу отключить кнопку отправки, пока форма в компоненте формы приложения не станет действительной.

Я не совсем уверен, как это сделать. Я думал о сохранении события valid на общем сервере, но я не уверен, как сохранить событие valid в сервисе. Я видел, что с нереактивными формами у вас может быть просто кнопка, которая использует тот же ngModel, но снова не уверен, сработает ли это в данном случае.

Любая помощь была бы признательна!

ИЗМЕНИТЬ

Я пробовал [disabled]="form.invalid" и [disabled]="!isValid()", но все еще могу нажать кнопку

Я также пробовал использовать [disabled]=!form.isValid() и [disabled]=!form.form.isValid()

Благодарность

1
Smokey Dawson 13 Мар 2018 в 01:43

2 ответа

Лучший ответ

В компоненте формы вы можете определить событие @Output formValid = new EventEmitter ().

Затем вы можете прослушивать изменения в полях ввода (при нажатии клавиш или около того) и при любом изменении проверять действительность и, если форма действительна, генерировать событие: formValid.emit ().

В компоненте приложения определите formIsValid = false, а в элементе app-form вы можете прослушивать событие formValid: (или какую-то функцию в app.component.ts вместо встроенный код).

И, наконец, кнопка

Вы действительно близки. Вот единственное, что вам нужно добавить:

<app-form #formTool></app-form>
<button class="full-width-btn" [disabled]="!isValid()" (click)="next(); form.sendResult();">SEND</button>
3
th3n3wguy 12 Мар 2018 в 22:49