Заполните форму с элементами управления (в соответствии с данными, возвращенными из службы) - PullRequest
Новая
       7

Заполните форму с элементами управления (в соответствии с данными, возвращенными из службы)

0 голосов
/ 25 июня 2018

Я пытаюсь перевести управляемую моделью форму в реактивную форму.

Это динамическая форма, которая заполняется в соответствии с данными из getCommandPacket this.renderSvc.getCommandPacket - получает данные с сервера, это сигнатура функции:

Сервер 

..
 [HttpGet("[action]")]
        public Dictionary<string, string> GetCommandPacket(int ID){
..
}
..

Html 

<form>
  <div *ngFor="let key of commandKeys">
    <span class="ui-float-label">
      <textarea [id]="key" [name]="key" pInputTextArea [(ngModel)]="commandPacket[key]" style="width: 40em;"></textarea>
      <label [for]="key">{{ key }}</label>
    </span>
  </div>

  <p-button label="Add Field"></p-button>

  <button p-button type="submit" icon="fa fa-angle-right" iconPos="right">
    <span class="ui-button-text ui-clickable">Re-Submit</span>
  </button>
</form>

TS 

...
export class CommandPacketDetailsComponent implements OnInit {
  @Input() id: number;
  myForm: FormGroup;

  constructor(private renderSvc: PfServerService, private fb: FormBuilder) {
  }

  commandPacket: { [key: string]: string; };
  commandKeys: string[];
  message: string = null;

  ngOnInit() {

    if (this.id !== 0 && typeof this.id !== "undefined")
      this.getCommandPacket(this.id);
    else
      this.message = "No ID Given for Packet"; 
  }

  getCommandPacket(id: number) {
    this.renderSvc.getCommandPacket(id).subscribe(data => {
      this.commandPacket = data;
      this.commandKeys = Object.keys(this.commandPacket);
    });
  }
...

как мне достичь того же результата, но Reactive-form способом?

1 Ответ

0 голосов
/ 25 июня 2018

Вы хотите использовать FormArray. Объявите форму и в ней объявите formArray. Затем, когда вы получите данные от службы, создайте столько formControl s, сколько у вас будет результатов и добавьте их в FormArray.

у вас есть пример здесь: https://angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups

тип бланка: 

yourForm:FormGroup;

определение формы: 

this.yourForm = this.fb.group({
      yourFormArray: this.fb.array([])
    });

сделайте добытчик для вашего formArray: 

get yourFormArray(): FormArray {
    return this.cpForm.get('commands') as FormArray;
  }

и затем, как только вы получите данные с сервера: 

this.yourFormArray.reset();
this.commandKeys.forEach(val =>
        this.yourFormArray.push(this.fb.group({ command: [''] }))
      );

, который создаст столько команд (без s) formGroups (имеющих только одно поле input), сколько у вас ключей в вашем результате commandKeys.

PS. как только вы настроите это, вы можете использовать patchValue на formArray, чтобы заполнить его фактическими значениями. что-то вроде: 

this.myFormArray.patchValue(commandKeys.map(key => ({ command: key })));

PS2.

чтобы очистить элементы управления формы от formarray, вы можете использовать функцию, подобную этой: 

//Clear formArray
  clearItemsFormArray() {
    while (this.yourFormArray.length > 0)
      this.yourFormArray.removeAt(0);
  }

yourFormArray - это то, что приходит от getter.

...