Arkadaşlar merhaba
Angular ile üzerinde çalıştığım bir uygulama var. Uygulamanın bir bölümünde API ile gelen derslerin karşısına html ile 2 adet input koymam gerekiyor ve bunu post etmem gerekiyor. İnput lar döngü ile ders sayısı kadar oluştuğu için her birine ayrı ayrı nasıl erişebileceği mi bulamadım. Çünkü oluşan her inputu işleyebilmem için 2 bilgiye ihtiyacım var hangi dersin hangi inputu olduğunu bilmem lazım. Ekran görüntüsü ne demek istediğimi daha iyi gösterecektir, yardımlarınızı bekliyorum kolay gelsin.
Erismekten kastin nedir? Essiz id yaratmakta mi sikinti cekiyorsun? Dongu icinde input’lari olusturmakta mi sikinti cekiyorsun?
1 Beğeni
Ekran görüntüsünü incelediyseniz orada yazan ders isimleri dinamik olarak gelmektedir ve buna karşılık oluşan input alanları da yine dinamik oluşmaktadır. Yani oluşturmak ile alakalı bir sıkıntım yok buraya kadar. Sorun buralara girilen değerlerin örneğin doğru ve yanlış sayılarının hangi dersin doğru sayısının girildiği input alanı hangi dersin yanlış sayısının girildiği input alanı olduğunu nasıl anlayıp ayırt edebileceğimi ve bunu html’den alıp işleyebileceğimi angular için bilmiyor olmam. Normal şartlarda tek input alanını çoğaltıyor olsam ders id’sini name ya da id olarak atayıp sorunu çözerdim ancak 1’den fazla inputta bu durumu yapmanın en doğru çözümünü arıyorum.
Ders id’sini name ya da id olarak atamak yerine dogru_ + ders id’sini, yanlis_ + ders id’sini name ya da id olarak atasan?
1 Beğeni
Öncesinde bir kaç yöntem denedim önerinize benzer ancak olmadı. Diğer türlü yaklaştım gibi ama angulara tam hakim olmamaktan kaynaklı istediğim birleşmeyi sağlayamadım. Aşağıda kodları paylaşarak anlatmaya çalışayım son durumu.
html dosyası
> <form [formGroup]="form">
> <table class="table">
> <thead>
> <th>Ders Adı</th>
> <th>Doğru Sayısı</th>
> <th>Yanlış Sayısı</th>
> </thead>
> <tbody *ngFor="let control of form.get('lessons').controls; let i=index">
> <tr [formGroup]="control">
> <td class="form-group">
> <input type="text" class="form-control" formControlName="correct_number" placeholder="Doğru Sayısı">
> </td>
> <td class="form-group">
> <input type="text" class="form-control" formControlName="wrong_number" placeholder="Yanlış Sayısı">
> </td>
> <td>
> <button (click)="remove(i)" class="btn btn-primary mr-5">Remove</button>
> </td>
> </tr>
> </tbody>
> </table>
> </form>
> <button (click)="addUser()" class="btn btn-primary mr-5">Add new</button>
>
> <button (click)="save()" class="btn btn-primary">Save</button>
component dosyası
import { Component, OnInit } from '@angular/core';
import { FormControl, FormArray, FormBuilder, Validators, FormGroup } from '@angular/forms';
@Component({
templateUrl: 'exercise-finish.component.html'
})
export class ExerciseFinishComponent implements OnInit {
form: FormGroup;
lessonResultFields;
constructor(
private fb: FormBuilder) {
}
ngOnInit() {
this.form = this.fb.group({
lessonResultFields: this.fb.array([])
});
this.getLessons()
}
initiatForm(): FormGroup {
return this.fb.group({
correct_number: [''],
wrong_number: [''],
});
}
addUser() {
const control = <FormArray>this.form.get('lessonResultFields');
control.push(this.initiatForm());
}
remove(index: number) {
const control = <FormArray>this.form.get('lessonResultFields');
control.removeAt(index);
}
save() {
console.log(this.form.value);
}
şimdi bu kodlar ile istediğimi bir nebze yapmış oldum ancak hala sonuç almış değilim. Bu kodlar ile istediğim inputları addUser(fonksiyon ismi önemli değil hazır bir kod kullandığım için yapı oturduktan sonra uygun isimle isimlendirilecektir.) fonksiyonu sayesinde oluşturabiliyorum ve kaç defa oluşturursam oluşturayım her bir inputa girilen veri save fonksiyonuyla konsola basıldığında ayrı birer obje olarak toplamda bir array de dönüyor, buraya kadar herşey güzel ancak 2 problem var;
1.si ben bunun butonla değil otomatik oluşturulmasını istiyorum
2.si ders bilgileri bana API ile geliyor ve kaç ders geldiğini önceden bilme durumum yok. Yani 5 ders geldi API’den diyelim 5 dersin karşısına doğru ve yanlış inputları otomatik yerleşsin ve totalde bunları ders id’si dahil bir arrayde alabileyim.