Question

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

表单用于使用键值对填充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 => { });
}

Answer 1

https://angular.io/guide/template-syntax#binding-syntax-an-overview

更具体地说，您可能希望使用NgModel ngModel=[(someProperty)]

对输入进行双向数据绑定

https://angular.io/api/forms/NgModel

当字段A发生变化时，Angular4更改字段B.

1 个答案: