Как использовать метод ввода в элементе формы цикла ngFor

Question

Я пытаюсь добавить входное значение в *ngForэлемент. с помощьюngFor Я создаю таблицы td, в которые добавлена ​​реактивная форма.

вот мой html:

<td *ngFor="let col of columns;" [ngClass]="col.class" data-testid="form-create-td">
<ng-container *ngIf="col.data !== ''">
   <input data-testid="form-create-name-field" id="name" type="text"
      class="form-control"
      formControlName={{col.data}}
      placeholder={{col.placeholder}}>
   <control-messages [control]="createForm.controls[col.data]"></control-messages>
</ng-container>
<ng-container *ngIf="col.data === ''">
   <button type="submit" aria-label="Ok" data-testid="form-create-btn" class="apply-item" style="border: 1px solid red"></button>
   <button type="button" aria-label="Cancel" (click)="confirmCancel(); false" class="cancel-apply"></button>
</ng-container>
</td>

из приведенного выше html я выбираю первый td (data-testid="form-create-td[0]), а это 1-е дети (form-create-name-field[0]), и я пытаюсь добавить к этому ценность следующим образом:

expect(component.getAllByTestId('form-create-name-field')).toBeTruthy(); //works
const td = component.getAllByTestId('form-create-td')[0]; //works
component.fixture.detectChanges();

и пытаюсь добавить значение вроде: td.children[0] - здесь входной элемент

component.input(td.children[0], {
        target: {
            value: 'New name'
        }
    });

но не работает.

Я устанавливаю formControlName от ngFor. Но я не могу его установить. если я утешуtd.children[0] - получение следующих значений:

HTMLUnknownElement {
        control: FormControl {
          validator: [Function],
          asyncValidator: null,
          _onCollectionChange: [Function],
          pristine: true,
          touched: false,
          _onDisabledChange: [ [Function] ],
          _onChange: [ [Function] ],
          _pendingValue: null,
          value: null,
          _updateOn: 'blur',
          status: 'INVALID',
          errors: { 'subsytem.required': true },
          valueChanges: EventEmitter {
            _isScalar: false,
            observers: [],
            closed: false,
            isStopped: false,
            hasError: false,
            thrownError: null,
            __isAsync: false
          },
          statusChanges: EventEmitter {
            _isScalar: false,
            observers: [],
            closed: false,
            isStopped: false,
            hasError: false,
            thrownError: null,
            __isAsync: false
          },
          _parent: FormGroup {
            validator: null,
            asyncValidator: null,
            _onCollectionChange: [Function],
            pristine: true,
            touched: false,
            _onDisabledChange: [],
            controls: [Object],
            valueChanges: [EventEmitter],
            statusChanges: [EventEmitter],
            status: 'INVALID',
            value: [Object],
            errors: null
          },
          _pendingDirty: false,
          _pendingTouched: false,
          _pendingChange: false
        }
      }

каков правильный подход к установке значения для входного элемента здесь?

ОБНОВИТЬ

когда у меня есть поле формы с объектом валидаторов, я не могу установить значение. пример, я не могу добавить ценность в следующем:

'Name': new FormControl('', { validators: [ValidationService.required, ValidationService.SubsystemMxLenght, ValidationService.SubsystemPatternMatch], updateOn: 'blur' }),
            'UpdatedByName': new FormControl({ value: this.appUserName, disabled: true }, []),

если я удалю объект валидаторов и обновлю его следующим образом:

'Name': new FormControl('', ),

работает отлично.

Answer 1

Вы пробовали выбирать поля ввода вместо tdс?

component.input(component.getAllByTestId('form-create-name-field')[0], {
        target: {
            value: 'New name'
        }
    });

Другой способ - создать идентификаторы теста с индексом, чтобы вы могли сделать

component.input(component.getByTestId('form-create-name-field-1'), {
        target: {
            value: 'New name'
        }
    });