将值设置为没有 NgModel、反应式表单的表单控件？答案

【问题标题】：set values to form control without NgModel, Reactive Forms?将值设置为没有 NgModel、反应式表单的表单控件？
【发布时间】：2020-03-12 15:17:49
【问题描述】：

我使用角度 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>

我有以下组件的 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
    });

但是所有字段都得到分配，除了国家，这是一个选择/选项，当我如上所述将国家代码值分配给国家字段时，它会丢失它在初始加载时拥有的国家列表。

然后我将信息加载到同一组件上的网格中，我放置了一个按钮，我可以获取被选中的记录。但是我该怎么做一次将行数据发送到选择/选项和其他文本框。如您所见，我不使用 ngNodel，所以我需要没有 ngModel 的解决方案？

【问题讨论】：

我不明白你的问题。数据需要来自什么？ 它需要去哪里？ 什么时候？
@KurtHamilton 数据最初被加载到网格上，然后我点击它上面的编辑按钮，记录应该加载到该表单上
你能提供一个活生生的例子吗？目前这一切都非常抽象且不具体
@KurtHamilton 此代码已提取....当我使用 this.newClientForm.setValue( {'company': companyName, 'street' : addressL1, 'city' : city, 'postal' : zip, 'state' : state, 'first' : firstName, 'last' : lastName, 'email' : email, 'country' : [countrList[1]] } );但它不会分配选择选项
@KurtHamilton 让我更新帖子

标签： angular

【解决方案1】：

添加这个供您选择

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

【讨论】：

是的，但是有没有办法从单个代码块为所有控件设置值？
CustomermanagerComponent.html:59 ERROR 错误：必须为表单控件提供一个值，名称为：'country'，这是它提供的错误
你可以从你创建表单的 ts 文件中发布代码吗？你在使用 FormBuilder 吗？

【解决方案2】：

请参考 Tzimpo 回答设置 select 的值。

还要改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>

【讨论】：