Назначение угловых элементов управления формы динамически сгенерированному массиву объектов

Question

У меня есть fromGroup, теперь я хочу динамически генерировать некоторые поля ввода на основе значений базы данных.Пример: у меня есть obj как

{
    type:"text",
    name:"test_name"
    placeholder:"Test"
}

I have created input field like:

<input type="text" name="test_name" placeholder="Test">

Пока я пытался,

добавить динамические элементы управления к моему FormGruop

this.applicationForm.addControl(formFieldObj.name, new FormControl('', Validators.required));

и выдвинул сгенерированный HTML в шаблон как:

<div [innerHTML]="getDynamicHTML()"></div>

Теперь проблема заключается в том, что невозможно добавить значение ни к одному из динамически добавляемых полей ввода.Как мне скомпилировать этот сгенерированный HTML?

Answer 1

Как вы обнаружили, содержимое innerHTML не интерполируется Angular. См. здесь , так что этот подход не сработает.

Если у вас есть массив объектов для каждого нужного вам поля ввода, вы должны иметь возможность циклически проходить по массиву в своем HTML, используя ngFor, который может динамически создавать нужные поля.

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

Основная концепция здесь - дайте мне знать, как вы поживаете. В этом примере я добавил элементы управления полем непосредственно в массив данных поля, но вы можете создать новую переменную или использовать группу полей.

HTML:

<h2>Input Form:</h2>
<form>
    <div *ngFor="let field of fieldData">
        <label>{{field.name}}</label> 
        <input [formControl]="field.formControl" [placeholder]="field.placeholder" />
    </div>
</form>
<h2>Current Values:</h2>
<div *ngFor="let field of fieldData">
    <label>{{field.name}} value: </label> 
    <span>{{field.formControl.value}}</span>
</div>

TS:

fieldData = [{
    type:"text",
    name:"test_name_1",
    placeholder:"Test 1 Placeholder"
},
{
    type:"text",
    name:"test_name_2",
    placeholder:"Test 2 Placeholder"
}]

constructor(){
    for (let i = 0; i < this.fieldData.length; i++) { 
        this.fieldData[i]['formControl'] = new FormControl('');
    }
}

Answer 2

Вы можете установить значение при инициализации формы.

<form [formGroup]="form">
    <input type="text" formControlName="test_name" placeholder="Test" />
</form>

this.form = this.fb.group({
   test_name: ['Some value', Validators.required],
});

Answer 3

Взгляните на методы form.setValue() и form.patchValue().Используя позже, вы можете частично установить значения в форме.

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

// sample object with values
formValues = {
    test_name: 'John',
    test_addr: 'London'
    ...
}

// this will setup values only for the form controls with matching keys in formValues
this.applicationForm.patchValue(formValues);