Как передать значение формы angular 2?

Question

[Алекcандр]

Привет, у меня есть форма, надо передать её значения в метод по нажатию кнопки так, чтобы они улетели массивом, ибо имею 6 одинаковых форм с разными значениями, как это сделать вторым ангуларом?
тут даже не форма, а просто вывожу датасет:

<div *ngFor="lang of languages" >
                            <hr>
                            <h3 *ngIf="lang.language == 1">English </h3>
                            <h3 *ngIf="lang.language == 2">Russian </h3>
                            <h3 *ngIf="lang.language == 3">German </h3>
                            <h3 *ngIf="lang.language == 4">Italian </h3>
                            <h3 *ngIf="lang.language == 5">Spanish </h3>
                            <h3 *ngIf="lang.language == 6">French </h3>

                            <div class="form-group">  
                                <label for="input01" class="col-sm-4 control-label">Title</label>
                                        <div class="col-sm-8">
                                            <input tabindex="1"  type="text"   class="form-control" value={{lang.title}} id="input01" placeholder="Title..."/>
                                        </div>
                            </div>
                            <div class="form-group">  
                              <label for="input02" class="col-sm-4 control-label">Description</label>
                                        <div class="col-sm-8">
                                            <input tabindex="2"  type="text"  class="form-control" value={{lang.description}} id="input02" placeholder="Description..."/>
                                        </div>
                            </div>    
                            </div>

функция такая:

confirmEdit(index: string, order: number, languages: Array<any>) {
        event.preventDefault();
        let data = {
            idx: this.tableId,
            index: index,
            order: order.toLocaleString(),
            showInPopup: this.showInPopup,
            showInTable: this.showInTable,
            languages: []
        };
        this.promo.update(data, this.rowId).subscribe(
            data => {
                this.router.navigate(['home/']);
            },
            error => {
                swal({title: error.text,
                    type: 'warning',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Ok'
                })
            }
        );
    }

Comments

[Alexander Belov]

Код бы посмотреть.

[Алекcандр]

Alexander Belov: добавил

Answer 1

[emp1re]

Ангуляр это mvw и это значит что с view нужно работать исключительно через model. Если масив не статический рекомендую записывать в [(ngModel)]

<select [(ngModel)]="_languagesArray[i]" [ngModelOptions]="{standalone: true}"  (change)="onChangeLanguage($event.target.value)">
	<option *ngFor="let language of languages">{{language}}</option>
</select>

Comments

[Алекcандр]

Я оставил комментарий с мои решением, но спасибо и за ваше :D

[Алекcандр]

Не уверен, правда, что ваш код работает, но добавил в решенные

[emp1re]

Ну он точно работает, я из своего проекта вытянул, просто не полный конекст )

Answer 2

[Алекcандр]

Вот так решил проблему, может и не очень красиво(подумаю как можно отрефакторить), но работает:

changeArray(obj: any, title: string, desc: string){
            let new_obj = obj;
            new_obj['title'] = title;
            new_obj['description'] = desc;
            this.languages.splice(this.languages.indexOf(obj), 1, new_obj);
            this.changeDetectorRef.detectChanges();

<div *ngFor="let lang of languages" (change)="changeArray(lang, title.value, desc.value)">
                            <hr>
                            <div class="form-group">  
                                <label for="input01" class="col-sm-4 control-label">Title</label>
                                        <div class="col-sm-8">
                                            <input tabindex="1" type="text"  class="form-control"  [value]="lang.title" #title id="input01" placeholder="Title..."/>
                                        </div>
                            </div>
                            <div class="form-group">  
                              <label for="input02" class="col-sm-4 control-label">Description</label>
                                        <div class="col-sm-8">
                                            <input tabindex="2" type="text" class="form-control" value={{lang.description}} #desc id="input02" placeholder="Description..."/>
                                        </div>
                            </div>    
                        </div>
<code>