проверьте, не загрязнена ли (дочерняя) форма во вложенных реактивных формах

#html #angular #typescript #angular-reactive-forms #formbuilder

#HTML #угловатый #машинописный текст #angular-reactive-forms #formbuilder

Вопрос:

У меня есть форма с разными разделами (вложенные группы форм) Как вы можете проверить, изменилось ли что-то в определенном разделе?

HTML:

 <div [formGroup]="formGroup">
  <div formGroupName="one">
    <input type="text" formControlName="email">
    <input type="text" formControlName="name">
   <div>
</div>
 

TS:

  export class someClass implements OnInit {
  
  formGroup = this.formBuilder.group({
    one: this.formBuilder.group({
      email: [null, [Validators.required, Validators.pattern('^[a-z0-9._% -] @[a-z0-9.-] \.[a-z]{2,4}

например, если мне нужен класс (стиль), если форма загрязнена, я могу сделать что-то вроде:

[class.dirty]="FormGroup.dirty"

Как я могу проверить, не загрязнена ли "одна" форма?


Ответ №1:

Вы можете получить доступ к загрязнению группы, вызвав

 formGroup.get('one').dirty
 

Это возвращает as , таким образом, со стандартными элементами управления, доступными. FormGroup AbstractControl

Ответ №2:

Angular автоматически добавит класс управления, если форма загрязнена, вы можете использовать этот класс для оформления в соответствии с вашими потребностями.

 div.ng-dirty{
....
}
 

Для получения дополнительной информации

Комментарии:

1. Неплохо. У меня также есть несколько сложных компонентов. и я должен что-то сделать с родительским компонентом / div div (который содержит форму). Другими словами, класс должен быть установлен на несколько уровней выше, и я не буду использовать jquery.

2. Затем вы можете использовать свойство FormGroup dirty для динамической установки класса, как указано в другом ответе.

)]],
name[null],
})
});

get emailControl(): AbstractControl { return this.formGroup.get('one.email'); }
get nameControl(): AbstractControl { return this.formGroup.get('one.name'); }

...
}
например, если мне нужен класс (стиль), если форма загрязнена, я могу сделать что-то вроде:

[class.dirty]=»FormGroup.dirty»

Как я могу проверить, не загрязнена ли «одна» форма?

Ответ №1:

Вы можете получить доступ к загрязнению группы, вызвав


Это возвращает as , таким образом, со стандартными элементами управления, доступными. FormGroup AbstractControl

Ответ №2:

Angular автоматически добавит класс управления, если форма загрязнена, вы можете использовать этот класс для оформления в соответствии с вашими потребностями.


Для получения дополнительной информации

Комментарии:

1. Неплохо. У меня также есть несколько сложных компонентов. и я должен что-то сделать с родительским компонентом / div div (который содержит форму). Другими словами, класс должен быть установлен на несколько уровней выше, и я не буду использовать jquery.

2. Затем вы можете использовать свойство FormGroup dirty для динамической установки класса, как указано в другом ответе.