Angular 6: добавить группу вспомогательных форм с помощью .addControl

#javascript #angular #typescript #reactive-forms

#javascript #angular #машинописный текст #угловые реактивные формы

Вопрос:

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

На данный момент это структура формы:

 name: ['', [Validators.required, Validators.maxLength(255)]],
address: this.ofb.group({
    addressLineOne: ['', Validators.required],
    addressLineTwo: ['', Validators.required],
    addressLineThree: [''],
    addressPostcode: ['', [Validators.required, OrgValidators.postcodeValidator]]
})
  

Я преобразовал поля в .addControl синтаксис следующим образом:

 this.createOrganisationForm.addControl('name', new FormControl(null, [Validators.required, Validators.maxLength(255)]));
this.createOrganisationForm.addControl('addressLineOne', new FormControl(null, [Validators.required]));
this.createOrganisationForm.addControl('addressLineTwo', new FormControl(null, [Validators.required]));
this.createOrganisationForm.addControl('addressLineThree', new FormControl(null, [Validators.required]));
this.createOrganisationForm.addControl('addressPostcode', new FormControl(null, [Validators.required, OrgValidators.postcodeValidator]));
  

Однако, похоже, они теряют ‘адрес’ группы. Я попытался добавить адрес в объект следующим образом:

  let addressGroup = {
  addressLineOne: ['', Validators.required],
  addressLineTwo: ['', Validators.required],
  addressLineThree: [''],
  addressPostcode: ['', [Validators.required, OrgValidators.postcodeValidator]]
 }
  

а затем добавьте ее вот так:

 this.createOrganisationForm.addControl('address', addressGroup);
  

но я получаю ошибку:

не может быть присвоен параметру типа ‘AbstractControl’.

Как мне добавить группу элементов управления к родительскому элементу управления с помощью .addControl метода.

Спасибо

Ответ №1:

Инициализируйте свою addressGroup типом FormGroup , как указано ниже:

пусть addressGroup = {

 let addressGroup: FormGroup = new FormGroup({
  

Ответ №2:

Это потому, что объект addressGroup не является экземпляром класса FormGroup.

 const addressGroup =  new FormGroup({
  addressLineOne: ['', Validators.required],
  ....
})