Привязать массив строк к текстовому полю и опубликовать форму отправки с изменениями угла 7 - PullRequest
Новая
       6

Привязать массив строк к текстовому полю и опубликовать форму отправки с изменениями угла 7

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

Привет, я уверен, что об этом спрашивали раньше, но я не могу найти ответ здесь.у меня есть массив строк, который является циклом и отображается как текстовое поле внутри формы при отправке формы все значение с новым измененным значением должно быть передано onSubmit () 

 <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>

  <input type="text" class="form-control" name="caption" [(ngModel)]="blockdummyJson.Properties.Caption" #Caption="ngModel"
    [ngClass]="{ 'is-invalid': f.submitted && Caption.invalid }" required />
  <div *ngIf="f.submitted && Caption.invalid" class="invalid-feedback">
    <div *ngIf="Caption.errors.required">radio button caption is required</div>
  </div>
  <input type="button" value="addOption" (click)="addOptionToRadioOption()" />

  <div *ngFor="let option of blockdummyJson.Properties.Options; let i = index">
    <input type="text" class="form-control" [(ngModel)]="blockdummyJson.Properties.Options[i]" />
  </div>
  <div class="form-group">
    <button class="btn btn-primary">Add</button>
  </div>

</form>

в компоненте стороны 

radioOption:any=[];
  data: any;
  blockdummyJson: any;
  blockName: string = 'OptionBuildingBlock';
  activityInfo: any;

  constructor(private messageservice: MessageService,
    private httpservice: ConfigService,
    private communicationservice: CommunicationService, ) { 

    var self = this;
    this.activityInfo = this.data;

    this.httpservice.getConfig(ConfigValue.apiURI + 'BuildingBlocks/' + this.blockName).subscribe(
      data => {
        self.blockdummyJson = data;
      },
      err => { },
      () => console.log('getting BuildingBlocks config completed')
    )

  }
    addOptionToRadioOption()
      {
        this.blockdummyJson.Properties.Options.push("sample Value");
      }

      onSubmit() {
        debugger;
      }

данные, поступающие с сервера Опции включают в себя массив 

Options=['test','test1',test2'];

заранее спасибо.

1 Ответ

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

У вас уже есть двухсторонняя привязка данных, при каждом вводе пользователя она будет обновляться до DOM.Вместо зависимости от ngForm, вы используете modelObj. 

export class AppComponent  {
  name = 'Angular';

  blockdummyJson = {
    Properties: {
      Options :['test','test1','test2'],
      Caption: ''
    }
  };

  addOptionToRadioOption()
      {
        this.blockdummyJson.Properties.Options.push(this.blockdummyJson.Properties.Caption);
      }

  onSubmit(formObj){
    console.log(this.blockdummyJson);
  }

Шаблон: 

<form name="form" (ngSubmit)="f.valid && onSubmit(f)" #f="ngForm" novalidate>

  <input type="text" class="form-control" name="caption" [(ngModel)]="blockdummyJson.Properties.Caption" #Caption="ngModel"
    [ngClass]="{ 'is-invalid': f.submitted && Caption.invalid }" required />
  <div *ngIf="f.submitted && Caption.invalid" class="invalid-feedback">
    <div *ngIf="Caption.errors.required">radio button caption is required</div>
  </div>
  <input type="button" value="addOption" (click)="addOptionToRadioOption()" />

  <div *ngFor="let option of blockdummyJson.Properties.Options; let i = index">
    <input type="text" name="options-{{i}}" class="form-control" [(ngModel)]="blockdummyJson.Properties.Options[i]" />
  </div>
  <div class="form-group">
    <button class="btn btn-primary">Add</button>
  </div>

</form>

StackBlitz: https://stackblitz.com/edit/angular-vsxwuy

...