Angular Forms создают контроль для каждого свойства объекта - PullRequest
Новая
       25

Angular Forms создают контроль для каждого свойства объекта

0 голосов
/ 23 октября 2018

Я пытаюсь создать массив угловых форм, который содержит несколько объектов, и каждый объект имеет 5 свойств.Я извлекаю массив объектов из хранилища и передаю его группе форм, с чем я борюсь, как добавить элементы управления для каждого отдельного объекта и его свойств.Я приложил фрагмент того, что у меня есть.

первая картинка - это массив объектов, которые я передал в мою форму, которые я распечатал в html, используя 

{{m1t1Form.value | json}}

Value: { "players": [ { "kills": 0, "deaths": 0, "damage": 0, "id": "JVnUQRv1YBt9D7JIkWvn", "playerID": "dAS3YyQvTX8ILQQPRxO3" }, { "kills": 0, "deaths": 0, "damage": 0, "id": "OwFBLDgQxDv86TiA2Urc", "playerID": "8ZCqn1NEqPSFchoPjigY" }, { "kills": 0, "deaths": 0, "damage": 0, "id": "UBnQmwiRJwF2HgNYvqGn", "playerID": "xkGVBqn3Pv50vVa5iiO1" }, { "kills": 0, "deaths": 0, "damage": 0, "id": "q4kHgwENnVTuvEIRUpUe", "playerID": "qmKJc03aqmfgAWrZQRzO" }, { "kills": 0, "deaths": 0, "damage": 0, "id": "qh8ZKPLpd64Cq4Ixw6Aa", "playerID": "OLJr4qvdOlFgIcb66iSI" } ] }

ex1 ex2 ex3

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

У меня такая же функциональность.Ниже код поможет вам.

HTML код: 

                                      <form [formGroup]="m1t1Form" class="form-horizontal">
                                            <div class="form-group">
                                                <div class="col-md-10">
                                                    <div formArrayName="players" *ngFor="let player of m1t1Form.get('players').controls; let i = index;">
                                                        <div [formGroupName]="i">
                                                            <div class="col-md-5">
                                                                <input class="form-control col-md-5" formControlName="kills" placeholder="kills">
                                                            </div>
                                                            <div class="col-md-5">
                                                                <input type="text" placeholder="death" class="form-control col-md-5"
                                                                 formControlName="death">
                                                            </div>
                                                            <button class="btn btn-info btn-xs m-t-sm" type="button" (click)="getPlayerDetails(i)">
                                                                <i name="save" class="fa fa-eye"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>

Код TS: 

    m1t1Form: FormGroup;
    players: FormArray;

    ngOnInit(){

       // Default adding one object
       this.m1t1Form= new FormGroup({
            'players': new FormArray([this.createItem()])
        });

        // Load you data from  service
        let playersData : any[] = []; // Fille data

        // Create control dynamically and set value from service data to form
        if (playersData .length > 0) {
            this.players= this.m1t1Form.get('players') as FormArray;
            while (this.players.length) {
               this.players.removeAt(0);
            }
            this.m1t1Form.patchValue(this.playersData );
            playersData .forEach(player=> 
            this.players.push(this.formBuilder.group(player)));
         }
      }

      createItem(): FormGroup {
          return new FormGroup({
            id: new FormControl(),
            kills: new FormControl(),
            death: new FormControl()
          });
       }


   getPlayerDetails(index: any) {
        if (this.players.at(index).get('id').value) {
            // Do whatever you want to do with id or playerId
        }
    }
0 голосов
/ 23 октября 2018

Привет. Это может быть полезно для привязки вашей формы, которую я использовал в своем проекте. 

constructor(  private formBuilder: FormBuilder)
{
    this.m1t1Form = formBuilder.group({
      'players' : formBuilder.array([])
    });
  }
}


ngAfterViewInit()
{
        for (let i = 0; i < valueObject.players.length; i++) 
        {
            const control = <FormArray>this.m1t1Form.controls['players'];
            control.push(this.initPlayerForm(valueObject.players[i]));
        }
}

initPlayerForm(playerVO : player)
{
    return this.formBuilder.group({
      'kills': [player.kills],
      'death': [player.death],
      'damage': [player.damage],
      'id': [player.id],
      'playerId': [player.playerId]
    });
}

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

...