Ошибка при сбросе шаблонно-управляемой формы / наборе текста объекта формы Angular 6

Question

У меня есть компонент с управляемой шаблоном формой, у меня есть объект myObj, который получает значения из полей формы.Компонент выглядит примерно так:

export class a {
myObj:any;
..
..
initiateObj():void {
    this.myObj = {
       x:"",
       y:"",
       z:[],
       xy: []
   };
 }


..
..

reset():void {
   this.initiateObj();
}

  ngOnInit() {
    this.initiateObj();
  }

Вид выглядит примерно так:

<form #myForm="ngForm">
  <input ... [(ngModel)]="myObj.x" #myInput="ngModel" />
  <input ... [(ngModel)]="myObj.y" #myInput1="ngModel" />

  <select ... [(ngModel)]="myObj.z">
  </select>
  ..
  .. 

  <button ....     (click)="submit()">
  <button ....     (click)="reset()">
</form>

, когда компонент инициирует следующие значения в консоли myObj:

x: "",

y: "",

z: [],

и т. Д.

Однако, когда я заполняю форму - даже еслиЯ не заполняю форму, просто нажимаю кнопку сброса, значения myObj в консоли будут:

x: null,

y: null,

z:[null]

..

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

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

Я пытался использовать в представлении одностороннюю привязку - [ngModel] вместо [(ngModel)], а затем, когда я нажимаю reset, все в порядке, но тогда myObj не получит значения из формы - потому чтоэто один из способов связывания.Поэтому я должен использовать двухсторонние привязки.Но затем, когда я нажимаю на reset, значения объекта становятся нулевыми.

Я спрашивал здесь раньше, и я получил ответ, чтобы объявить класс следующим образом:

export class initiateObj {
 x: '';
 y: '';
 z: [];
 xy: string;
 constructor(options: any = {}) {
   this.x = options.x || null;
   this.y = options.y || null;
   this.z = options.z || null;
   this.xy = options.xy || null;
}
}

  reset(): void {
     this.myObj = new initiateObj();
    }

   ngOnInit(): void {
     this.myObj = new initiateObj();
    }

Но этоРешение также не сработало.Я все еще получаю то же самое после нажатия кнопки сброса.

Затем я попытался с помощью viewchild использовать встроенный метод reset - но он также не работал.Тем не менее, после отправки и сброса снова - значения становятся null

Затем я понял в консоли, что если я войду в консоль myObj, то после нажатия кнопки сброса и получить значения null,он также дает другое сообщение, прикрепленное к объекту в консоли:

«значение, указанное ниже, было оценено только сейчас»

Так что, похоже, что когда я нажимаю «сброс», я получаю значения желаний, но затемнемедленно меняет значения null?Является ли это возможным?

И если да, то как решить эту проблему?

Я также пытался с помощью viewchild получить доступ к полю каждой формы и дать ему "" или [], но все равно я получаю null

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

Спасибо!

Answer 1

undefined || null вернет ноль. Если вы не передадите какое-либо значение параметра в конструктор, options.x, options.y, options.z и options.xy в конструкторе будут undefined. Измените свой конструктор на:

constructor(options: any = {}) {
   this.x = options.x || '';
   this.y = options.y || '';
   this.z = options.z || '';
   this.xy = options.xy || [];
}

тогда должно работать