Próbuję ustawić dynamicznie wybrać wartość, ale zmiany nie są odzwierciedlone nawet przy użyciu zmian wykrywania.

Składnik:

export class AppComponent implements OnInit {

  constructor(private cd: ChangeDetectorRef) {

  }
  genders=['male','female'];
  SignupForm:FormGroup;

  ngOnInit(){
    this.SignupForm = new FormGroup({
      'gender':new FormControl(),
    });
  }

  onSubmit(){
    console.log(this.SignupForm);
  }

  setGender() {
    this.SignupForm.controls.gender.setValue(this.genders[1]);
    console.log(this.SignupForm.controls.gender.value);
    this.cd.detectChanges();
  }
}

Szablon:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
            <form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
                <select fromControlName="gender">
         <option *ngFor="let g of genders">{{g}}</option>
       </select>

        <button class="btn btn-primary" type="submit">Submit</button> 
      </form>
    </div>
  </div>
</div>

<button class="btn btn-primary" (click)="setGender()">Set Female</button>

Stackblitz

1
Maihan Nijat 26 luty 2019, 23:52

2 odpowiedzi

Najlepsza odpowiedź

Masz bardzo mały błąd, zobacz:

<select fromControlName="gender">

Zmiana przez:

<select formControlName="gender">
1
Kalamarico 26 luty 2019, 21:02

Myślę, że możesz spróbować czegoś wyglądającego na poniższe, wybierałoby to opcję domyślnej dla select / option, otrzymując ją do odczytu wartości sterowania formularza, który byłby ustawiony na wczesnym wejściu do cyklu życia komponentu.

Rozwiązanie

Dodaj to do swoich opcji, aby ustawić domyślną wartość formularza.

<option *ngFor="let g of genders" [selected]="gender.value">{{g}}</option>

Następnie w komponencie.

public ngOnInit(): void {
this.SignupForm = new FormGroup({
  'gender':new FormControl(),
 });
}

public setGender(): void
{
     this.gender.setValue(this.genders[1]);
     this.cd.detectChanges();
     console.log(this.gender) // just check here the value is set correct.  
}

public get gender(): AbstractControl
{
    return this.SignupForm.controls['gender']
}

Powinno to zapewnić wymaganą funkcjonalność. Patrząc trochę neater. Oto Artykuł . Ktoś napisał na ten temat. Wszystkiego najlepszego.

1
Dince12 26 luty 2019, 21:18