Проверка формы Angular7 при нажатии кнопки или свойства не в HTML

Question

У меня есть вложенная группа форм с кнопкой («Подтвердить»), и я хочу, чтобы родительская форма была недействительной, пока не будет нажата кнопка на дочернем элементе.Однако похоже, что валидатор предназначен исключительно для входных данных.

Можно ли выполнить проверку формы простым нажатием кнопки или свойством, которого вообще нет в моем html?

Я попытался с помощью следующего кода, но чувствую, что я лаю не на том дереве.

пользовательский валидатор, подобный этому:

function isConfirmedValidator(confirmed: boolean): ValidatorFn {
    return (c: AbstractControl): { [key: string]: boolean } | null => {
        if (confirmed) {
            return null;
        } else {
            return { "notConfirmed": true };
        }
    };
}

local prop:

isConfirmed = false;

кнопка подключена к этому:

onConfirm = () => {
  this.isConfirmed = true;
}

init вложенная форма:

this.nestedForm = this.formBuilder.group({}, isConfirmedValidator(this.isConfirmed));

---

Редактировать: Должен ли я иметь скрытое поле в моем html, которое я привязываю к formControl?Кажется слишком глупым, но, может быть, самый чистый путь?

Answer 1

Вы можете добавить необходимый элемент управления в форму и установить для него значение, когда пользователь нажимает кнопку:

TS:

 userForm: FormGroup = this.fb.group({
    name: ['My name', [Validators.required]],
    button: [null, [Validators.required]],
 });

HTML:

<button type="button" (click)="userForm.get('button').setValue(true)">
  Click required
</button>

Вот рабочий пример