Как связать два модальных как 1 ViewModel в Angular 8 - PullRequest
Новая
       35

Как связать два модальных как 1 ViewModel в Angular 8

1 голос
/ 08 октября 2019

Я хочу связать ViewModel в Angular 8 Component имя "Тест". Я инициализирую Viewmodel как null. Он отлично работает с моделью, но не с ViewModel. вот ссылка Ссылка редактора кода: https://stackblitz.com/edit/angular-a95o1e

Модель # 1 

export class GoldDetail
{
     //For Gold 
    GoldDetailId: number;
    PurchaseNo: number;
    SaleNo: number;
    Weight: number;
}

Модель # 2 

export class CurrencyDetail {

    Name :string;
    CurrencyId:number;
    Amount:number;

}

я добавляю модель вида, подобную этой 

export class Vmmodel
{
  goldDetail :GoldDetail;
  currencyDetail:CurrencyDetail;
}

Я хочу привязать эту " VmModel " к моему компоненту. Я инициализирую viewmodel с null.eg test.ts 

  resetForm(form? : NgForm): any {
        if(form!=null)
          form.reset();
          this.paymentService.vmmodel ={
           currencyDetail:new  CurrencyDetail(),
           goldDetail:new GoldDetail(),

      }
  }

test.html 

<form   autocomplete="off"  #golddetail="ngForm" (submit)="onSubmit(golddetail)" >

    <div class="form-group col" >
        <label>weight</label>
    <input #currencyDetail.Name="ngModel" [(ngModel)]="paymentService.vmmodel.currencyDetail.Name" class="form-control">

      </div>
</form>

, но я получил ошибку в консоли. см. приложение pelase см. эту картинку

Заранее спасибо, я стараюсь изо всех сил объяснить мою проблему.

1 Ответ

2 голосов
/ 08 октября 2019

Здесь много проблем с соглашениями, но давайте остановимся на основном вопросе.

Вы используете vmmodel до его инициализации. 

<input #currencyDetail.Name="ngModel" [(ngModel)]="paymentService.vmmodel.currencyDetail.Name" class="form-control">

Только при сбросе вы инициализируете значение для него. То, что ваш код пытается сделать, это доступ paymentService.vmmodel.currencyDetail.Name. Другими словами, он не может прочитать значение ...vmmodel.currencyDetail, потому что vmmodel - undefined.

Прочтите разницу между null и undefined .

Когда форма "создана", input заполняется любым значениемв ngModel.

Вы можете использовать переменную со значениями по умолчанию или использовать оператор coalease.

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

РЕДАКТИРОВАТЬ 

export class AppComponent  {
  name = 'Angular';
  vmmodel = new Vmmodel(); // as simple as that. This is still going to have problems as inner properties are not initialized neither and paymentService is undefined as well.

  resetForm(form? : NgForm): any {
    if(form!=null)
      form.reset();
    this.vmmodel ={
     currencyDetail:new  CurrencyDetail(),
     goldDetail:new GoldDetail(),
      // AcBankAccountHolders:null
    }
  }
}
...