无法在Angular 7的ReactiveForms中设置默认选择值

Question

I have some problem with changeDetection as Angular doesnt update my reactive control value into the dropdown view.

I have reproduced the full problem in a simple StackBlitz example .

So basically how can i force Angular to show me 'Argentina' as selected default option in dropdown ?

Would be very grateful if anyone give me a hint how to solve this

Answer 1

It seems like the the select options list does not contain that particular data you are trying to select.

In your case, { "id": 5, "text": "Argentina" } should be part of this.definitions too.

You can either push that object to this.definitions before declaring your reactive form,

constructor(private fb: FormBuilder){
  this.definitions.push(this.default);
  this.rootFormGroup = this.fb.group({
    control: this.default
  });

Or, you explicity include that object on this.definitions when you are writing your code.

definitions = [
    {
      "id": 1,
      "text": "Poland"
    },
    {
      "id": 2,
      "text": "UK"
    },
    {
      "id": 3,
      "text": "Germany"
    },
    {
      "id": 4,
      "text": "France"
    },
    { 
      "id": 5, 
      "text": "Argentina" 
    }

  ]

Answer 2

You have to include the { "id": 5, "text": "Argentina" } object in the definitions array you are binding to the select tag. Without adding the object you cant bind the value.

definitions = [
    { 
      "id": 5, 
      "text": "Argentina" 
    },
    {
      "id": 1,
      "text": "Poland"
    },
    {
      "id": 2,
      "text": "UK"
    },
    {
      "id": 3,
      "text": "Germany"
    },
    {
      "id": 4,
      "text": "France"
    }
  ]