Как удалить поле NgForm после отправки формы

Я хочу знать, можно ли удалить поле формы из представленной функции NgForm.

Я использую плагин для ionic 3 под названием Select-Searchable, который используют эти два поля формы. Плагин требует, чтобы массивы были настроены таким образом, чтобы он работал правильно.

У меня есть это:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ToastController,Platform } from 'ionic-angular';
import { SelectSearchableComponent } from 'ionic-select-searchable';
import { NgForm } from '@angular/forms';
import { Geolocation } from '@ionic-native/geolocation';

import { ReapService } from '../../services/reap-service';
import { ProjectReviewPage } from '../project-review/project-review';

class Location {
  public ID: number;
  public Location: string;
}
class updatedLocation {
  public ID: number;
  public Location: string;
}
@IonicPage()
@Component({
  selector: 'page-project',
  templateUrl: 'project.html',
})
export class ProjectPage {
 private locationsArray: Location[];
 location: Location;
 private updatedLocation: updatedLocation[];
 updatedlocation: updatedLocation; 
 constructor(public navCtrl: NavController,
             public navParams: NavParams,
             public reap: ReapService,
             public toastCtrl: ToastController,
             private geolocation: Geolocation,
             private platform: Platform) {
             
             this.locationsArray = reap.getLocations;
             this.updatedLocation = [];
             }
             
             
   grabLocation(){
        this.selectedClosestLoc = true;
        /* Ensure the platform is ready */
        this.platform.ready().then(() => {
        /* Grabs user geolocation */
        this.geolocation.getCurrentPosition().then((resp) => {
            // 4 decimal places
            this.userLocation = [parseFloat(resp.coords.latitude.toFixed(4)),parseFloat(resp.coords.longitude.toFixed(4))];
           
            this.userLocation = [resp.coords.latitude,resp.coords.longitude];
            //var t0 = performance.now();
            //Calls service to handle location 
            this.reap.grabUserLoc(resp.coords.latitude,resp.coords.longitude);
            //var t1 = performance.now();
            //console.info("Call to grabUserLoc took " + (t1 - t0) + " milliseconds.");
            this.updatedLocation = this.reap.updatedLocation;

            console.info(this.updatedLocation);
          }).catch((error) => {
            //console.info('Error getting location', error);
            this.presentToast(error);
          });
        });
      }          
             
onSubmit(Form: NgForm){
    if (!Form.value.Location){//If user grabs nearest location
      Form.value.Location = Form.value.updatedLocation;//update form value
      //console.info(Form.value.Location);
      Form.value.remove.updatedLocation//Some type of remove option for the form
     }
    }
     searchableChange(event: { component: SelectSearchableComponent, value: any         }) {
        console.info('value:', event.value);
    } 
    resetLocation(){
          this.wellLocation = [];
          this.updatedLocation = [];
          this.selectedClosestLoc = false;
      }
  }

Чтобы прояснить ситуацию, у меня есть оператор *ngIf, определяемый кнопкой, которую пользователь нажимает для переключения между двумя разными полями формы. Поля в конечном итоге хранят одно и то же конечное значение, но, конечно, я установил их как два разных значения, и для моего API я чувствую, что было бы удобнее сохранить одно значение.

HTML-код: просто показаны два поля формы, о которых идет речь, для простоты. Данные из Location взяты из моего API, а updatedLocation фильтрует данные на основе местоположения пользователя через координаты GPS.

 <ion-content>
  <form #f = "ngForm" (ngSubmit) = "onSubmit(f)">
   <ion-list>  
    <ion-item class = "formField ionField" *ngIf = "!selectedClosestLoc">
        <ion-label color = "primary" stacked >LOCATION</ion-label>
          <select-searchable
          item-content
          [(ngModel)] = "location"
          [items] = "locationsArray"
          title = "Location"
          itemValueField=ID
          itemTextField=Location
          name = "Location"
          [canSearch] = "true"
          [canClear] = "true"
          (onChange) = "searchableChange($event)">
        </select-searchable>
    </ion-item>

    <ion-item class = "formField ionField" *ngIf = "selectedClosestLoc">
      <!-- data thrown into dropdown from API -->
      <ion-label stacked>NEAREST LOCATION</ion-label>
        <select-searchable
         item-content
         ngModel
         title = "updatedLocation"
         itemValueField=ID
         itemTextField=Location
         name = "updatedLocation"
         [items] = "updatedLocation"
         [canSearch] = "true"
         [canClear] = "true"
         [focusSearchbar] = "true"
         (onChange) = "searchableChange($event)">
       </select-searchable>
    </ion-item>

     <ion-item>
        <button [disabled] = "!f.valid" type = "submit" id = "submitButton" ion-button            full large>Submit</button>
     </ion-item>
   </ion-list>
  </form>
</ion-content>

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

mix3d 03.10.2018 23:37

@ mix3d Я могу показать свой html-код, если вам это нужно? Но только поля, касающиеся моего вопроса, если это вам поможет.

Stephen Romero 03.10.2018 23:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
516
2

Ответы 2

Form.reset(); or Form.SetValue(""); or if validators Form.markAsUntouched();

или если вы пытаетесь удалить элемент управления формой из группы форм, вы можете использовать

 .removeControl();

подробнее здесь https://angular.io/api/forms/FormGroup

Я не хочу сбрасывать другие значения в форме и не хочу сбрасывать поле формы. Моя цель - полностью удалить это конкретное поле формы.

Stephen Romero 03.10.2018 23:28

в вашем вопросе указано, что вы хотите удалить значение формы из представленной NGform, которое будет либо сброшено, либо установлено значение чего-то пустого. Вы можете сбросить значение только для одного элемента управления формы.

Ryu 03.10.2018 23:43

ОК, попробую еще раз. У вас есть два поля формы, которые переключаются между собой на основе кнопки, но вы хотите передать только одно в свой API, правильно ?, Если местоположение неверно (или, возможно, пусто?), Вы хотите использовать данные в UpdatedLocation?

Ryu 03.10.2018 23:53

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

Stephen Romero 03.10.2018 23:55

Вы отправляете всю форму в api и просто хотите удалить один FormControl? Не могли бы вы просто не передать данные в api и не забыть их тогда? Если это не сработает, не могли бы вы предоставить дополнительную информацию о своем файле .ts, чтобы получить более четкое представление о том, чего вы пытаетесь достичь?

Ryu 04.10.2018 00:07

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

Stephen Romero 04.10.2018 00:20

Не могли бы вы использовать

delete Form.value['updatedLocation'];

Если я не неправильно понял исходный вопрос, вас больше беспокоит то, что отправляется в API, а не форма Angular. Итак, нам просто нужно удалить свойство из объекта javascript.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete

Это не дает ответа на вопрос. Чтобы критиковать или запрашивать разъяснения у автора, оставьте комментарий под его сообщением. - Из обзора

Rafael 04.10.2018 03:49

Я думаю, что это возможное решение того, о чем изначально просил автор.

Learning2Code 04.10.2018 16:11

Вы можете уточнить этот ответ? Или, возможно, какая-либо документация по этому поводу?

Stephen Romero 04.10.2018 23:40

Другие вопросы по теме