无法将 patchValue 与选择值绑定到对象一起使用答案

【问题标题】：Unable to use patchValue with select value bind to object无法将 patchValue 与选择值绑定到对象一起使用
【发布时间】：2019-03-28 00:10:37
【问题描述】：

我正在使用角度表单构建器添加数据，其中表单有一个选择元素，其值为绑定到对象，但是当我尝试使用补丁值方法或设置值方法字段编辑表单时，选择除外提交了正确的数据，请有人纠正我。

html

  <form [formGroup]="addCountryForm">
    <div class="form-group">
      <label for="countryControl">Name</label>
      <select class="form-control" formControlName="countryControl" (change)="resetwarning()">        
        <option [ngValue]="country" *ngFor="let country of countries">
          {{country.name}}
        </option>
      </select>          
    </div>
    <div class="form-group">
      <label for="note">Note</label>
      <textarea rows="4" class="form-control" placeholder="Enter any Note (If Any)" formControlName="note"></textarea>          
    </div>
  </form>

export class AddCountryComponent implements OnInit {

  addCountryForm: FormGroup;

  data: any;
  heading: string;
  countries = [];
  customeError: boolean;
  customeErrorMsg: string;

  constructor(
    public activeModal: NgbActiveModal,
    private fb: FormBuilder,
    private countryService: CountriesService
  ) { }

  ngOnInit() {
    this.countries = this.countryService.allCountryList();
    this.createForms();
    if (this.data) {
      console.log(this.data.details);
      this.addCountryForm.setValue({
        countryControl: this.data.details,
        note: this.data.note
      }
      );
      this.heading = 'Edit Country';
    } else {
      this.heading = 'Add Country';
    }
  }

  createForms() {
    this.addCountryForm = this.fb.group({
      countryControl: [''],
      note: ['', [Validators.required]]
    });
  }   

}

示例输出

[
  {
    "id": "1",
    "sortname": "AF",
    "name": "Afghanistan",
    "phonecode": "93"
  },
  {
    "id": "2",
    "sortname": "AL",
    "name": "Albania",
    "phonecode": "355"
  },
  {
    "id": "3",
    "sortname": "DZ",
    "name": "Algeria",
    "phonecode": "213"
  }
 ]

和

console.log(this.data.details);

输出

 {id: "1", sortname: "AF", name: "Afghanistan", phonecode: "93"}

【问题讨论】：

this.data.details 应该是一个对象，它是您用来填充国家/地区选择的数组的一部分。你能弄清楚console.log(this.data.details); 中到底是什么吗？
{{countries|json}} 示例输出 [ { "id": "1", "sortname": "AF", "name": "Afghanistan", "phonecode": "93" }，{“id”：“2”，“sortname”：“AL”，“name”：“阿尔巴尼亚”，“phonecode”：“355”}，{“id”：“3”，“sortname”：“ DZ", "name": "阿尔及利亚", "phonecode": "213" } ] 和 console.log(this.data.details); {id：“1”，排序名称：“AF”，名称：“阿富汗”，电话代码：“93”}

标签： angular angular-forms

【解决方案1】：

我想出了一个适合我的解决方案，有什么问题：我正在尝试为在 json 对象数组中具有值的下拉列表进行修补值和设置值，因此它与设置所选值的对象进行比较，我做了以下操作：

ngOnInit() {
this.countries = this.countryService.allCountryList();
this.createForms();
if (this.data) {
  const selectedCountry = this.countries.find(item => JSON.stringify(item) === JSON.stringify(this.data.details));
  this.addCountryForm.patchValue({
    countryControl: selectedCountry,
    note: this.data.note
  }
  );
  this.heading = 'Edit Country';
} else {
  this.heading = 'Add Country';
}

}

【讨论】：