установить значения для контроля формы без NgModel, Reactive Forms?

Question

Я использую angular 9

У меня есть реактивная форма с 3 текстовыми полями и одним выбором / опциями (это для загрузки названий стран). Другие текстовые поля для ввода имени, отчества и фамилии. Это модальное всплывающее окно

У меня есть следующая разметка для текстового поля:

   <div class="form-group">
            <label for="first-name">Contact First Name</label>
            <input type="text"  formControlName="first"  class="form-control" id="first-name" placeholder="Bill" [ngClass]="{ 'is-invalid': submitted && f.first.errors }" >
            <div *ngIf="submitted && f.first.errors" class="invalid-feedback">
              <div *ngIf="f.first.errors.required">First Name is required</div>
            </div>          
          </div>
          <div class="form-group">
            <label for="last-name">Contact Last Name</label>
            <input type="text" formControlName="last" class="form-control" id="last-name" placeholder="Clinton" [ngClass]="{ 'is-invalid': submitted && f.last.errors }" >
            <div *ngIf="submitted && f.last.errors" class="invalid-feedback">
              <div *ngIf="f.last.errors.required">Last Name is required</div>
            </div>          
          </div>

разметка для выбора / опции выглядит следующим образом:

<div class="form-group col-sm-6">
              <label for="country">Country</label>             
              <select class="form-control" id="country" formControlName="country"  (change)="changeCountry($event)"  [ngClass]="{ 'is-invalid': submitted && f.country.errors }" >
                <option value="">Choose your country</option>
                <option *ngFor="let c of countryList" value="{{c.Code}}">{{c.Name}}</option>       
              </select>

              <!-- <div class="invalid-feedback" *ngIf="submitted && country.errors.required">
                <sup>*</sup>Please enter your city name
              </div> -->

              <div *ngIf="submitted && f.country.errors?.required" class="invalid-feedback">
                <div *ngIf="f.country.errors?.required">Select country</div>
              </div>

</div> 

i иметь следующий ts-код компонента для присвоения значений полям формы

  this.newClientForm.setValue(
      {'company':  companyName, 
      'street' : addressL1,
      'city' : city,
      'postal' : zip,
      'state' : state,
      'first' : firstName,
      'last' : lastName,
      'email' : email,
      'country' : countryCode //this has value of option
    });

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

затем я загружаю информацию в Grid, который находится на том же компоненте, я поместил кнопку, я могу получить выбранные записи. Но как мне отправить данные строки в select / options и другие текстовые поля сразу. как вы видите, я не использую ngNodel, поэтому мне нужно решить ios без ngModel?

Answer 1

Пожалуйста, обратитесь к ответу Tzimpo, чтобы установить значение выбора.

Также измените html:

<select class="form-control" id="country" formControlName="country"  (change)="changeCountry($event)"  [ngClass]="{ 'is-invalid': submitted && f.country.errors }" >
                <option value="">Choose your country</option>
                <option *ngFor="let c of countryList" [value]="c.Code">{{c.Name}}</option>       
              </select>

Answer 2

Добавьте это для вашего выбора

this.newClientForm.controls['country'].setValue(countryCode , {onlySelf: true});