Size: a a a

Angular - русскоговорящее сообщество

2021 February 22

K🦋

Kir 🦋 JS in Angular - русскоговорящее сообщество
Вот выдает бот инвайты
источник
2021 February 23

М

Максим in Angular - русскоговорящее сообщество
Ребята привет, помогите плиз с динамическими формами. Убил уже 2 дня и не получается урок с обучалки применить к своему процессу 🙁
источник

М

Максим in Angular - русскоговорящее сообщество
Есть ответ от сервера, который надо вывести в форму, типа


{
name:name,
descr:desct,
attributes: [
  {
    name:name,
    val:val
  },
  {
    name:name,
    val:val
  }
]
}
источник

М

Максим in Angular - русскоговорящее сообщество
С статикой проблем нет, а вот вывести аттрибуты беда 🙁

this.form = new FormGroup({
 name: new FormControl(null, Validators.required),
 descr: new FormControl(null, Validators.required)
})
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Максим
С статикой проблем нет, а вот вывести аттрибуты беда 🙁

this.form = new FormGroup({
 name: new FormControl(null, Validators.required),
 descr: new FormControl(null, Validators.required)
})
При получении данных, сделайте примерно следующее

this.service.get('').pipe(tap(res => this.form.patchValue(res)));

Если у вас виджеты привязаны к контролам, например, <input formControlName="name"/>, то данные автоматически появятся в виджетах
источник

М

Максим in Angular - русскоговорящее сообщество
Alex Bu
При получении данных, сделайте примерно следующее

this.service.get('').pipe(tap(res => this.form.patchValue(res)));

Если у вас виджеты привязаны к контролам, например, <input formControlName="name"/>, то данные автоматически появятся в виджетах
Надо сделать динамическую форму, заранее неизвестно какие в ней есть поля.
гуглю FormBuilder, но ума не хватает его правильно использовать
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Максим
Надо сделать динамическую форму, заранее неизвестно какие в ней есть поля.
гуглю FormBuilder, но ума не хватает его правильно использовать
Вам нужно вывести набор одинаковых групп виджетов по свойству attributes?
источник

М

Максим in Angular - русскоговорящее сообщество
да
источник

М

Максим in Angular - русскоговорящее сообщество
надо перебрать массив и понасоздавать formControl
источник

VS

Vladimir Stempel 👁🍵... in Angular - русскоговорящее сообщество
Максим
надо перебрать массив и понасоздавать formControl
глянь formArray
источник

VS

Vladimir Stempel 👁🍵... in Angular - русскоговорящее сообщество
ой)
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Тогда попробуйте следующее

Заявите форму как
from = new FormGroup({
name: new FormControl(),
descr: new FormControl(),
attributes: new FormArray()
});

при получении данных сделайте примерно следующее
tap(res => {
const atrributesGroups = res.attributes.map(attribute => new FormGroup({name: new FormControl(attribute.name), val: new FormControl(attribute.val)}));
this.form.get('attributes') = new FormArray(attributesGroups);
});

соответственно, в html проиттерируйтесь по этому массиву, аля
<ng-container *ngFor="let attributeGroup of form.controls.attributes.controls">
<input [control]="attributeGroup.get('name')"/>
<input [control]="attributeGroup.get('val')"
</ng-container>
источник

VS

Vladimir Stempel 👁🍵... in Angular - русскоговорящее сообщество
@thekiba я тут поломал что-то
источник

VS

Vladimir Stempel 👁🍵... in Angular - русскоговорящее сообщество
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Alex Bu
Тогда попробуйте следующее

Заявите форму как
from = new FormGroup({
name: new FormControl(),
descr: new FormControl(),
attributes: new FormArray()
});

при получении данных сделайте примерно следующее
tap(res => {
const atrributesGroups = res.attributes.map(attribute => new FormGroup({name: new FormControl(attribute.name), val: new FormControl(attribute.val)}));
this.form.get('attributes') = new FormArray(attributesGroups);
});

соответственно, в html проиттерируйтесь по этому массиву, аля
<ng-container *ngFor="let attributeGroup of form.controls.attributes.controls">
<input [control]="attributeGroup.get('name')"/>
<input [control]="attributeGroup.get('val')"
</ng-container>
@molescenko
Можно улучшать, это просто сходу костяк, на который можно ориентироваться, чтобы получить первую более менее рабочую версию
источник

М

Максим in Angular - русскоговорящее сообщество
Alex Bu
Тогда попробуйте следующее

Заявите форму как
from = new FormGroup({
name: new FormControl(),
descr: new FormControl(),
attributes: new FormArray()
});

при получении данных сделайте примерно следующее
tap(res => {
const atrributesGroups = res.attributes.map(attribute => new FormGroup({name: new FormControl(attribute.name), val: new FormControl(attribute.val)}));
this.form.get('attributes') = new FormArray(attributesGroups);
});

соответственно, в html проиттерируйтесь по этому массиву, аля
<ng-container *ngFor="let attributeGroup of form.controls.attributes.controls">
<input [control]="attributeGroup.get('name')"/>
<input [control]="attributeGroup.get('val')"
</ng-container>
form: FormGroup

ngOnInit(): void {
  this.form = new FormGroup({
 name: new FormControl(null, Validators.required),
 descr: new FormControl(null, Validators.required),
 attributes: new FormArray()
})
}

просит в FormArray закинуть 1-3 элемента сразу (
поставлю null как и выше
источник

VS

Vladimir Stempel 👁🍵... in Angular - русскоговорящее сообщество
Alex Bu
Тогда попробуйте следующее

Заявите форму как
from = new FormGroup({
name: new FormControl(),
descr: new FormControl(),
attributes: new FormArray()
});

при получении данных сделайте примерно следующее
tap(res => {
const atrributesGroups = res.attributes.map(attribute => new FormGroup({name: new FormControl(attribute.name), val: new FormControl(attribute.val)}));
this.form.get('attributes') = new FormArray(attributesGroups);
});

соответственно, в html проиттерируйтесь по этому массиву, аля
<ng-container *ngFor="let attributeGroup of form.controls.attributes.controls">
<input [control]="attributeGroup.get('name')"/>
<input [control]="attributeGroup.get('val')"
</ng-container>
this.form.get('attributes').setValue(new FormArray(attributesGroups));
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Максим
form: FormGroup

ngOnInit(): void {
  this.form = new FormGroup({
 name: new FormControl(null, Validators.required),
 descr: new FormControl(null, Validators.required),
 attributes: new FormArray()
})
}

просит в FormArray закинуть 1-3 элемента сразу (
поставлю null как и выше
Скрин ошибки, плс
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Vladimir Stempel 👁🍵
this.form.get('attributes').setValue(new FormArray(attributesGroups));
++
источник

AB

Alex Bu in Angular - русскоговорящее сообщество
Максим
form: FormGroup

ngOnInit(): void {
  this.form = new FormGroup({
 name: new FormControl(null, Validators.required),
 descr: new FormControl(null, Validators.required),
 attributes: new FormArray()
})
}

просит в FormArray закинуть 1-3 элемента сразу (
поставлю null как и выше
Кажется, можно просто сделать new FormArray([]);
источник