Nano Hash - криптовалюты, майнинг, программирование

Введенные пользователем данные не сохраняются в переменной компонента Angular Reactive form

Здравствуйте, я использую реактивные формы Angular, я использовал FormArray для динамического добавления элементов управления формы. Я использую директиву ngModel для хранения введенных пользователем данных в переменной компонентов. но он не хранит его в переменной компонентов. мой код:

<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
  <div class="example-label">
    <span class='block'>    
          <span *ngIf="selectedForm">
                  <h2 class="example-heading">{{displayForm}} </h2>
          </span>
    <div formArrayName="controlArray">
      <div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">
        <table>
          <tr>
            <td> <span *ngIf="control.value.controlType == 'text'">
          <md-form-field class="example-full-width">
            <input mdInput type="text" placeholder="{{control.value.placeholder}}" 
            ([ngModel])="control.value.value" > <!--user entered data is not storing in control.value.value -->
          </md-form-field>  
      </span></td>

          </tr>
        </table>
      </div>
      <button md-raised-button color="primary" type="submit" [disabled]="!reviewForm.valid">Submit</button>
    </div>
    </span>
  </div>
</form>

Вот код класса компонента:

export class FormListComponent {

  formsDb: FormData[];
  selectedForm: FormData;
  displayForm: String;
  test: String;
  reviewForm = new FormGroup({
    'controlArray': new FormArray([])
  });
  constructor(public formService: FormService, public authGuardService: AuthGuardService) {
    console.log('form-list is logged in 0528', this.authGuardService.authService.isLoggedIn);
  }

  ngOnInit() {
    this.reviewForm = new FormGroup({
      'controlArray': new FormArray([
      ])
    });
    this.showDefaultForm();
  }



  addForm() {
    this.displayForm = this.selectedForm.formName;
    this.reviewForm.setControl('controlArray', new FormArray([]));  //to reset FormArray               
    console.log('selected form 0528', this.selectedForm);
    for (let control of this.selectedForm.controlsArr) {
      const myControl: Control = new Control(control.controlType, control.label, control.required,
        control.placeholder, control.options);

      var controlArg: FormControl;
      if (control.required)
        controlArg = new FormControl(myControl, Validators.required);
      else
        controlArg = new FormControl(myControl);

      (<FormArray>this.reviewForm.get('controlArray')).push(controlArg);
    }
  }

  onSubmit() {
    console.log('submitted form 0528', this.reviewForm);
  }
}

Вот мой класс Control, я передаю его объект конструктору FormControl:

export class Control{  
    constructor(public controlType?:string, public label?:string, public required?:boolean ,public placeholder?:string, 
      public options?:string[], public value?:string){  }
  }

чтобы проверить, хранятся ли введенные пользователем данные в переменной компонента, я зарегистрировал свою переменную FormGroup, то есть reviewForm в этом случае. Никакие данные в нем не сохраняются. Пожалуйста, помогите, спасибо


  • Укажите источник компонента. Вы смешиваете реактивную форму и форму, управляемую шаблонами, это плохая идея. 04.12.2017
  • Источник компонента добавлен в вопрос, на самом деле я новичок в Angular. 04.12.2017
  • Пожалуйста, помогите, как мне сохранить введенные пользователем данные в переменной компонента. @JEY 04.12.2017
  • Попробуйте [(ngModel)] вместо ([ngModel]) 04.12.2017
  • правильно ли это синтаксически, я этого нигде не видел 04.12.2017
  • ([ngModel]) = control.value.value ›‹! - введенные пользователем данные не сохраняются в control.value.value - › 04.12.2017
  • тоже не работает 04.12.2017
  • @JEY Вы сказали, что я смешиваю реактивную форму и форму, управляемую шаблонами, теперь я удалил ngModel в форме из своего кода. теперь нормально? а также расскажите, пожалуйста, как читать ввод моей формы. Спасибо 05.12.2017

Ответы:


1

Я бы посоветовал не использовать ngModel в реактивных формах. Вместо этого используйте элементы управления формы для своей реактивной формы, поэтому удалите value и [(ngModel)]. Вот упрощенная версия вашего кода, чтобы вы могли понять. Создайте форму и, если вы получаете некоторые значения по умолчанию, выполните итерацию этого массива и отправьте группы форм в свой formArray:

constructor(private fb: FormBuilder) {
  this.reviewForm = fb.group({
    controlArray: fb.array([])
  })
  let controlArr = this.reviewForm.controls.controlArray as FormArray
  // arr contains your default values
  this.arr.forEach(x => {
    controlArr.push(fb.group({
      controlType: [x.controlType],
      value: [x.value]
    }))
  })
}

Затем в вашем шаблоне переключитесь на использование formControlName для ваших элементов управления, а также добавьте formGroupName для каждой группы форм в вашем FormArray:

<div formArrayName="controlArray">
  <!-- add formGroupName -->
  <div *ngFor="let control of reviewForm.get('controlArray').controls; 
               let i = index" 
               [formGroupName]="i">
    <table>
      <tr>
        <td> 
          <span *ngIf="control.value.controlType == 'text'">
            <div class="example-full-width">
              <input type="text" formControlName="value">
             </div>  
          </span>
        </td>
      </tr>
    </table>
  </div>
</div>

StackBlitz

05.12.2017
  • Спасибо за ответ, но я получаю сообщение об ошибке, применяя это решение. Ошибка говорит: Не удается найти элемент управления с помощью пути. Я думаю, что это дает ошибку, потому что значение не является именем элемента управления, я создал класс элемента управления с необходимыми атрибутами. и при создании FormControl я передаю свой объект класса управления в качестве первого параметра. 05.12.2017
  • Я добавил свой контрольный класс, о котором идет речь, пожалуйста, помогите. 05.12.2017
  • @WaleedShahzaib Ну, то, что я предоставил, было просто примером, вместо value просто примените свои собственные имена элементов управления формой в цикле, где вы устанавливаете группы форм для формирования массива. 05.12.2017
  • Я тоже пробовал, но он тоже не работает. Я попробовал control.value.value (атрибут класса управления, в котором я хочу сохранить введенные данные.) Как formControlName, 05.12.2017
  • в угловой форме для выравнивания метки и свойства. Если мы не используем таблицу для выравнивания, есть ли другой способ сделать это? Извините, что спросил об этом здесь. Я не нашел другого способа спросить. @ AJT_82 13.12.2017
  • @WaleedShahzaib Извините, я не совсем понимаю ваш вопрос, не могли бы вы уточнить? 13.12.2017
  • Скажите, пожалуйста, что делает компонент Angular родительским компонентом, насколько я знаю, если мы используем директиву компонента в другом шаблоне компонента, делает другой компонент родительским. Верно? Кроме того, если мы перейдем к компоненту с помощью routerLink в элементе кнопки, делает ли это также другой компонент родительским компонентом? Извините, что задаю это здесь, я не знал другой платформы, чтобы спросить. @ AJT_82 01.01.2018
  • родительский компонент может быть, когда у него есть дочерний селектор в родительском, например <child></child>, также он может быть родительским, когда у вас есть <router-outlet></router-outlet> внутри родителя. Когда дело доходит до взаимодействия компонентов (если это стоит за этим вопросом), это означает, что когда у вас есть дочерний селектор внутри родителя, вы можете использовать @Input и @Output, тогда как вы не можете использовать его, когда дочерний элемент находится за маршрутизатором. В таком случае вам необходимо воспользоваться услугой. Надеюсь, это поможет :) 01.01.2018
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..