检索 Angular FormGroup 中每个字段的值答案

【问题标题】：Retrieve the value of each field in Angular FormGroup检索 Angular FormGroup 中每个字段的值
【发布时间】：2021-06-03 19:55:22
【问题描述】：

我只想检索 ForGroup 中每个字段的值（编号：“9190000471”，internationalNumber：“+91 91900 00471”，nationalNumber：“091900 00471”，e164Number：“+919190000471”），任何想法怎么做。我正在尝试将 js 库用于 Angular 的国际电话输入 (NgxIntlTelInput)，它在 stackblitz (https://stackblitz.com/edit/ngx-intl-tel-input-demo-ng-10?file=src%2Fapp%2Fapp.component.ts) 中有一个现有示例。我附上了值应该来自的表单组中特定元素的屏幕截图。

【问题讨论】：

标签： angular

【解决方案1】：

只需更改添加 ngx-intl-tel-input 的 html 文件，如下所示 -

 <ngx-intl-tel-input (change)="getValues()" [cssClass]="'custom'" [preferredCountries]="preferredCountries"
            [enableAutoCountrySelect]="true" [enablePlaceholder]="true" [searchCountryFlag]="true"
            [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]" [selectFirstCountry]="false"
            [selectedCountryISO]="CountryISO.India" [maxLength]="15" [tooltipField]="TooltipLabel.Name"
            [phoneValidation]="true" [separateDialCode]="separateDialCode"
            [numberFormat]="PhoneNumberFormat.National" name="phone" formControlName="phone">
 </ngx-intl-tel-input>

我在此处添加了更改功能并在 .ts 文件中检索其值，我添加了如下功能：-

getValues() {
   console.log(this.phoneForm.controls["phone"].value.countryCode);
   console.log(this.phoneForm.controls["phone"].value.dialCode);
   console.log(this.phoneForm.controls["phone"].value.e164Number);
   console.log(this.phoneForm.controls["phone"].value.internationalNumber);
   console.log(this.phoneForm.controls["phone"].value.nationalNumber);
   console.log(this.phoneForm.controls["phone"].value.number);
 }

这将检索您的所有值，您可以在浏览器控制台窗口中检查它。你可以参考这里-Stackblitz

【讨论】：