Я хочу знать, можно ли удалить поле формы из представленной функции 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 Я могу показать свой html-код, если вам это нужно? Но только поля, касающиеся моего вопроса, если это вам поможет.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Form.reset(); or Form.SetValue(""); or if validators Form.markAsUntouched();
или если вы пытаетесь удалить элемент управления формой из группы форм, вы можете использовать
.removeControl();
подробнее здесь https://angular.io/api/forms/FormGroup
Я не хочу сбрасывать другие значения в форме и не хочу сбрасывать поле формы. Моя цель - полностью удалить это конкретное поле формы.
в вашем вопросе указано, что вы хотите удалить значение формы из представленной NGform, которое будет либо сброшено, либо установлено значение чего-то пустого. Вы можете сбросить значение только для одного элемента управления формы.
ОК, попробую еще раз. У вас есть два поля формы, которые переключаются между собой на основе кнопки, но вы хотите передать только одно в свой API, правильно ?, Если местоположение неверно (или, возможно, пусто?), Вы хотите использовать данные в UpdatedLocation?
Правильно, поэтому после отправки формы я устанавливаю значение updatedLocation на Location, и это работает нормально. Теперь все, что мне нужно сделать, это полностью удалить поле формы updatedLocation из формы.
Вы отправляете всю форму в api и просто хотите удалить один FormControl? Не могли бы вы просто не передать данные в api и не забыть их тогда? Если это не сработает, не могли бы вы предоставить дополнительную информацию о своем файле .ts, чтобы получить более четкое представление о том, чего вы пытаетесь достичь?
Я отправляю всю форму, и да, я могу технически пропустить поле формы, но я хотел знать, есть ли возможность удалить поле формы здесь, не беспокоясь о другом поле формы. Я обновлю вопрос, добавив больше информации.
Не могли бы вы использовать
delete Form.value['updatedLocation'];
Если я не неправильно понял исходный вопрос, вас больше беспокоит то, что отправляется в API, а не форма Angular. Итак, нам просто нужно удалить свойство из объекта javascript.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete
Это не дает ответа на вопрос. Чтобы критиковать или запрашивать разъяснения у автора, оставьте комментарий под его сообщением. - Из обзора
Я думаю, что это возможное решение того, о чем изначально просил автор.
Вы можете уточнить этот ответ? Или, возможно, какая-либо документация по этому поводу?
возможно, вам нужно поделиться большим количеством вашего кода. Трудно понять, без чего вы пытаетесь обойтись.