我使用ng2-tel-input与反应形式方法(Angular) .
Issue:
当我打开标记下拉列表并选择一个值时,它工作正常 . 值正确显示在输入中,但国家标志不会更改,并显示默认标志 .
当我在输入中手动更改值时,标志会自动更改,否则显示默认国家标志 .
Example:
值格式: +917878747474
所选国家: India
默认国家/地区: us
when i press on set value. phone no set on input but flag remain same
html
<form [formGroup]="form">
<small class="phone-text">{{ placeHolder }}</small>
<md-input-container class="full-width pt-0">
<input type="text"
mdInput
formControlName="phone"
ng2TelInput
[ng2TelInputOptions]="{initialCountry: initialCountry}"
(hasError)="hasError($event)"
(ng2TelOutput)="hasOutPut($event)"
#phoneInput
maxlength="45"/>
</md-input-container>
<button type="button" (click)="setValue()">Set Value</button>
</form>
Component
import {Attribute, Component, forwardRef, Input} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
@Component({
selector: 'app-phone',
templateUrl: './phone.component.html',
styleUrls: ['./phone.component.scss']
})
export class PhoneComponent implements ControlValueAccessor, Validator {
placeHolder = 'Default Value';
initialCountry = 'us';
form: FormGroup;
constructor(private _fb: FormBuilder) {
this._initForm();
}
setValue(): void {
const phone = '+917878747416'
this.form.setValue({phone: phone});
}
private _initForm(): void {
this.form = this._fb.group({
'phone': ['']
});
}
hasError(event: any): void {
if (!event && this.form.value.phone !== '') {
this.form.get('phone').setErrors(['invalid_cell_phone', true]);
}
}
hasOutPut(event: any): void {
this.form.patchValue({phone: event});
}
}
任何帮助,将不胜感激 .