相关疑难解决方法(0)

如何在角度2反应形式中为所有表单字段设置默认值？

这是重现问题的plnkr

下面的代码不会更新下拉列值,因为它有一个与之关联的对象.

注意:这里我需要使用从Backend API收到的响应为所有表单字段设置默认值.

Component.html

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)">
    <div class="form-group">
        <label>Country:</label>
        <select formControlName="country">
          <option *ngFor="let country of masterCountries" [ngValue]="country">{{country.countryName}}</option>
        </select>
    </div>

    <div class="form-group">
      <label for="">Name</label>
      <input type="text" class="form-control" formControlName="name">
      <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
            Name is required (minimum 5 characters).
          </small>
      <!--<pre class="margin-20">{{ myForm.controls.name.errors | json }}</pre>-->
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    <div class="margin-20">
      <div>myForm details:-</div>
      <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
      <pre>Is myForm submitted?: <br>{{submitted | json}}</pre>
      <pre>myForm value: <br>{{myForm.value | json}}</pre>
    </div> …

尝试理解传递给setValue时'onlySelf'参数的作用.

this.form.get('name').setValue('', { onlySelf: true })

文档说:"如果onlySelf为true,则此更改只会影响此FormControl的验证,而不会影响其父组件.默认为false."

但是我很难理解这一点.使用Angulars的模型驱动形式仍然相当新.

我正在使用Angular 4反应形式创建一个下拉列表

<select id="city" formControlName="city" (change)="onCitySelect($event)" >
    <option *ngFor="let city of cities" [ngValue]="city" >
        {{ city }} 
    </option>
</select> 

在下拉列表中选择一个值时，我想调用一个方法并显示所选值。

这是我的代码

onCitySelect(event) {
    console.log(event.target.value);
}

我希望它能打印下拉列表中所示的城市名称。但是，它似乎也显示索引号。例如，

2: London

而不是London下拉列表中实际显示的内容。

没有索引如何获取城市名称？

我正在尝试使用formControl使该选项在Ionic Select 中显示为选中状态，但是它不起作用，该值是在表单中设置的，当我键入 console.log (this.form) 时，该字段的值会出现，但是它没有出现在 select 中，是空白的。

我正在使用 ionic 4 版本。

HTML：

<!-- Analysis Mode -->
<ion-col size="12">
  <ion-label class="custom-label" stacked>Modo de Análise</ion-label>
  <ion-select formControlName="analysis_mode" interface="popover">
    <ion-select-option value="1">Aleatório</ion-select-option>
    <ion-select-option value="2">Sequencial</ion-select-option>
  </ion-select>
 </ion-col>

形式：

this.form = this.formBuilder.group({
  analysis_mode: new FormControl(null, Validators.required),
  value: new FormControl(null, Validators.required),
});


this.form.controls['analysis_mode'].setValue(1);