Каков наилучший способ обработки данных onSelect тега select в реактивных формах angular

Question

Я хочу знать, как лучше всего справиться со следующей ситуацией. У меня есть форма с парой полей, которые включают тег выбора.

<form [formGroup]="myForm">
  <select formControlName="" >
    <option *ngFor="let c of countries" value="c"  (select)="onSelect(c)">{{c.name}}</option>
  </select>
</form>


export class AppComponent {
  constructor(private FormBuilder: FormBuilder) {}

  public myForm: FormGroup;
  countries = [
    { id: 1, name: "United States" },
    { id: 2, name: "Australia" },
    { id: 3, name: "Canada" },
    { id: 4, name: "Brazil" },
    { id: 5, name: "England" },
  ];

  ngOnInit() {
    this.myForm = this.FormBuilder.group({
      country: new FormGroup({
        id: new FormControl("", []),
        name: new FormControl("", []),
      }),
    });
  }

  onSelect(option) {
  //tried this but not updating the myForm.value 
    this.myForm.controls['country'] = this.fb.group({
      id: new FormControl(event.detail.id, []),
      name: new FormControl(event.detail.name, [])
    });
  }
}

, поэтому мой вопрос заключается в том, как мне сопоставить выбранное значение с formObject. И вы хотите узнать, как обновить myForm в onSelect () {}, как указать formControlName в теге select или есть какой-либо упрощенный способ сделать это.

Answer 1

сработало setValue нижеследующее обновляло элементы управления, но не объект myForm.value

onSelect(option) { 
//tried this but not updating the myForm.value 
this.myForm.controls['country'] = this.fb.group({ id: new FormControl(event.detail.id, []), name: new FormControl(event.detail.name, []) }); 
}

the below code worked
onSelect(option) { 
this.myForm.controls['country'].setValue({ id: event.detail.value, name: event.detail.description })
}

Answer 2

Вы можете привязать к событию change тега select и отправить в качестве аргумента myForm.value.country. Попробуйте следующий

Контроллер

export class AppComponent implements OnInit {
  myForm : FormGroup;
  countries = [
    {id: 1, name: "United States"},
    {id: 2, name: "Australia"},
    {id: 3, name: "Canada"},
    {id: 4, name: "Brazil"},
    {id: 5, name: "England"}
  ];

  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit(){
    this.myForm = this._formBuilder.group({
      country: new FormGroup({
        id: new FormControl('', []),
        name: new FormControl('', [])
      })
    });
  }

  compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
  }

  onChange(option: any){
    console.log(option);
  }
}

Шаблон

  
    
      {{ country.name }}
    
  


Form value: 
{{ myForm.value | json }}

Рабочий пример: Stackblitz

Кстати, у вас есть два элемента управления формы id и name, которые не связаны ни с одним элементом в шаблоне. Таким образом, вы получите ошибку control.registerOnChange не является функцией . Смотрите здесь .

Answer 3

Это два способа сделать это, и они лучше всего подходят для большинства случаев: 1- Использование метода изменения следующим образом:

(change)="onSelect(c)"

2 - Использование метода ngModelChange, например:

(ngModelChange)="onSelect(c)"

Есть и другие способы сделать это, но это зависит от того, чего вы хотите достичь.

метод изменения будет вызываться только при выборе любого параметра.

ngModelChange будет вызываться в любое время, когда изменяется значение вашей модели. Обычно это используется, когда у вас есть зависимые поля. Это следует использовать осторожно. Все, что можно сделать с помощью метода изменения, следует делать только с помощью метода изменения.

Допустим, если вы хотите заполнить значения с помощью вызова API, вы либо явно связываете каждое значение, либо можете использовать [compareWith]

Итак, все зависит от какой-то цели. Это очень прямолинейно, но все же, если вы sh увидите какой-либо пример, дайте мне знать.

Answer 4

Используйте this.myForm.get("country").valueChanges, чтобы обнаружить изменение выпадающего списка.

Попробуйте так:

.ts

ngOnInit() {
   this.myForm = this.FormBuilder.group({
      country: new FormControl(null)
   });

   this.myForm.get("country").valueChanges.subscribe(value => {
      console.log(value);
   });
 }

. html

<form [formGroup]="myForm">
  <select formControlName="country" >
    <option *ngFor="let c of countries" [value]="c.id"  >{{c.name}}</option>
  </select>
</form>

Рабочая демоверсия