用户界面

Question

我有一个虚假的问题......（在前端方面完成noobie）

我正在使用Angular 4和TypeScript构建一个小型CRUD项目，我在其中调用API以获取和更新基于id的电话号码。

我从服务中获得的电话号码非常标准，分为3部分：

1. 国家/地区代码
2. 预拨号
3. 实际数字

但是在UI中，我实际上有两个输入字段 - 一个用于国家代码，一个用于预先存在，另一个用于实际数字。要想象这一点，如果我在编辑时从用户处获得的电话号码是+445551234567，我有两个输入字段+44555和1234567

换句话说，我必须在我的编辑页面的UI中将国家代码+ predial映射到一起，并且当我将更新调用回到API时，我需要能够将它再次映射到3个变量。

在理想世界中，我会将此映射到我的服务中，但遗憾的是，由于其他限制，这是不可能的。

所以我有这些模型/接口：

export interface Contacts {
    email: string;
    phoneNumber: PhoneNumber;
    faxNumber: PhoneNumber;
}

export interface PhoneNumber {
    countryCode: string;
    predial: string;
    number: string;
}

然后在我的输入组件中，我有一个表单：

this.form = new FormGroup({
     phoneCountryCodeAndPredial: new ValidatableFormControl(null, [Validators.required]),
     phoneNumber: new ValidatableFormControl(null, [Validators.required]),

     faxCountryCodeAndPredial: new ValidatableFormControl(null, [Validators.required]),
     faxNumber: new ValidatableFormControl(null, [Validators.required]),

     email: new ValidatableFormControl(null, [Validators.pattern(/\S+@\S+\.\S+/)])
});

在html中只是简单的电话号码：

<div class="form-group-line">
   <input [formControl]="form.controls['phoneCountryCodeAndPredial']" name="countryCodeAndPredial"
   class="required"
   placeholder="Predial"
   [(ngModel)]=contacts.phoneNumber.countryCode/> 

   <input [formControl]="form.controls['phoneNumber']" name="phoneNumber"
   class="required"
   placeholder="Phone Number"
   [(ngModel)]="contacts.phoneNumber.number"/>
</div>

所以我想要双向数据绑定，这就是我使用[(ngModel)] banana in the box的原因，但是如何在ngModel中使用双向数据绑定+映射？

我无法创建一个将国家/地区代码和预先组合在一起的函数，并将值传递给ngModel。

那么如何在UI中进行此映射？什么是好习惯？

Answer 1

您可以拆分ngModel绑定：

<text-input [formControl]="form.controls['phoneCountryCodeAndPredial']" 
  name="countryCodeAndPredial"
  class="required"
  placeholder="Predial"
  [ngModel]="contacts.phoneNumber.countryCode + contacts.phoneNumber.predial"
  (ngModelChange)="Utils.setCombinedNumber(contacts.phoneNumber, $event)"
>

然后在模型更改上设置正确的字段：

setCombinedNumber(phoneNumber: PhoneNumber, combined: string) {
  // your actual splitting code here
  let pattern = new RegExp(/^(\+\d{2})(\d+)$/);
  if (pattern.test(combined)) {
    let match = pattern.exec(combined);
    phoneNumber.countryCode = match[1];
    phoneNumber.predial = match[2];
  }
  else {
    // do some error handling here? maybe show a toast?
  }
}