Form.valid не работает в Angular

Я пытаюсь проверить все компоненты формы, используя 'formName'.valid в Type Script.

Я хочу проверить «все поля домашней формы». Здесь я создаю поле ввода и проверяю его с помощью валидатора. Если форма действительна, должно появиться предупреждение «Домашняя форма действительна», если нет, должно появиться всплывающее окно «Домашняя форма недействительна».

Другая часть («Домашняя форма недействительна») работает, когда форма недействительна. Но часть if («Домашняя форма действительна») не работает, когда форма действительна.

Я написал приведенный ниже код в конструкторе.

Как решить эту проблему?

if (this.homeForm.valid) {
  alert("Home Form is valid");
}

else {
 alert("Home Form is invalid");
}

Исходный код — StackBlitz


javascript angular angular-reactive-forms
person progman    schedule 21.03.2018    source источник
comment
в чем проблема? Если вы удалите валидатор из вашего управления формой, он правильно предупредит, что форма действительна.   -  person AJT82    schedule 21.03.2018
comment
Можете ли вы написать форму, вопрос не кажется полным   -  person Lalit Mohan    schedule 21.03.2018
comment
Я отредактировал вопрос.   -  person progman    schedule 21.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

У вас есть ошибки в вашем коде, во-первых, вы не добавили formControlName и не закрыли свой тег должным образом, так что это:

<input type="text" class="form-control" placeholder="Home" <br> должно быть

<input type="text" class="form-control" placeholder="homeName" formControlName="homeName">

И это заставит проверку работать, другое дело, что ваши предупреждения конструктора вызываются только один раз, чтобы исправить это, вы можете сделать следующее:

в вашем app.components.ts

constructor(private homeFB: FormBuilder) {

    this.homeForm = this.homeFB.group({
      homeName: ['', [Validators.required]],
    });
    this.onChanges(); 
  }
  onChanges(): void { 
    this.homeForm.valueChanges.subscribe(val => {
    if (this.homeForm.valid) {
      alert("Home Form is valid");
    } else {
      alert("Home Form is invalid");
    }
    });
  }

Надеюсь, это поможет вам. Вот ссылка на ваш обновленный пример

person scx    schedule 21.03.2018

arrow_upward
0
arrow_downward

Вы забыли подключить поле ввода к форме управления. Итак, напишите:

<input formControlName="homeName" type="text" class="form-control" placeholder="Home">

внутри вашей формы, и вы будете в порядке.

person mahval    schedule 21.03.2018