Выбор вложенного forControl в машинописи

Question

У меня есть такая группа форм

this.orderForm = this._formBuilder.group({      
  vlanFormGroup: this._formBuilder.group({
    vId: ['', [Validators.required, Validators.pattern(this.positiveInteger)]],
    vName: ['', [Validators.required, Validators.pattern(this.vlanNamePattern)]],
    addVToTrunk: [''],
    trunkInterfaces: this._formBuilder.array([
      this.createAddVlanToTrunkMember()
    ])
  })
});    

Я пытаюсь получить такой вид

let vId = component.orderForm['vlanFormGroup'].controls['vId'];

Но это не работает. Пожалуйста, нужна помощь здесь.

Answer 1

Надеюсь, это поможет ...

let vId = this.orderForm.get('vlanFormGroup').get('vId')

Answer 2

Вы можете получить его с помощью функции FormGroup.get, которая переносит строковый путь через вложенные элементы формы в элемент управления:

this.orderForm.get('vlanFormGroup.vId');

Предполагая html что-то вроде:

<form [formGroup]="orderForm">
   <div formGroupName="vlanFormGroup">
      <input type="text" name="id" formControlName="vId">
   </div>
</form>

Демонстрация StackBlitz

Просто интересно, почему вы позволили vId = component .orderForm вместо этот .orderForm?

Проблема with this.orderForm.controls ['vlanFormGroup'], если он возвращает AbstractControl, у которого нет свойства элементов управления.

Он может быть приведен к FormGroup, чтобы к нему можно было получить доступ, но, очевидно, не так кратко, как используя функцию get:

let vForm = this.orderForm.controls['vlanFormGroup'] as FormGroup;
console.log(vForm.controls['vId']);

Обратите внимание, что также должно быть:

this.orderForm.controls['vlanFormGroup']

вместо:

this.orderForm['vlanFormGroup']