Angular 角度4更改字段A时更改字段B

我创建了一个包含两个字段的表单，国家代码和拨号代码

该表单用于用键值对填充JSON文件，其中countryCode是键，拨号代码是值

我想实现一个用户界面，当输入现有的国家代码时，自动填写拨号代码

如何在Angular 4中实现这一点

以下是我的表单视图：

<label class="k-form-field">
    <span>Country Code <span class="k-required">*</span></span>
        <kendo-dropdownlist id="countryCode"
            formControlName="countryCode"
            [data]="countryCodeList"
            [textField]="key"
            [valueField]="value"
            class="width100">
        </kendo-dropdownlist>
        <span *ngIf="countryCode.touched && countryCode.invalid" class="help-block">
        <span *ngIf="countryCode.errors.required">Country Code is required.</span>
    </span>
</label>

<label class="k-form-field">
    <span>Dial Code <span class="k-required">*</span></span>
    <input id="dialCode"
        name="dialCode"
        formControlName="dialCode"
        [value] ="syncCountryCode"
        class="k-textbox width100" />
    <span *ngIf="dialCode.touched && dialCode.invalid" class="help-block">
        <span *ngIf="dialCode.errors.required">Dial Code is required.</span>
    </span>
</label>

以下是我的组件：

public countryCodeList: Array<string>;
public syncCountryCode: string = "";

ngOnInit(): void {
    this.utilService.getCodes()
    .then((res: Array<PhoneCode>) => {
        this.countryCodeList = Object.keys(res); //--> Object.values(res);
    })
    .catch(res => { });
}

更具体地说，您可能希望使用NgModel NgModel=[someProperty]对输入进行双向数据绑定