如何使用 FormControl 在 Angular 中将值设置为 Form

Question

<div class="form-group" [formGroup]="gGroup">
<label for="grouplabel">Group</label>
<select formControlName="groupControl" [(ngModel)]="groupobj" (ngModelChange)="onSelectGroup($event)" id="group" class="form-control">
<option>Select</option>
<option *ngFor="let group of groups" [selected]="current_group === group.name">{{group.name}}</option>
</select>
</div>

如何在组件中将<select>字段的值设置为动态选择？

我看了文档，https://angular.io/api/forms/FormControlName#use-with-ngmodel 但仍然没有可以帮助我的例子。

尝试：

this.gGroup.get('groupControl').setValue('Select');

Answer 1

我想出了一种方法来做到这一点：

<form #f="ngForm">
<select name="option" ngModel>
<option value="" disabled>Choose an option</option>
<option *ngFor="let option of options" [ngValue]="option">
{{ option.title }}
</option>
</select>
</form>

this.f.controls.state.setValue(this.options[0]);

检查我做的这个例子：

https://stackblitz.com/edit/angular-xpeth8

Answer 2

将响应式表单和模板驱动表单混合在一起不是一个好主意，即在同一表单控件中绑定 formGroup/formControlName 和 ngModel 绑定。

如果我没记错的话，这在 Angular 6 中被弃用，并将在 Angular 7 中删除。至少这是我几天前在控制台中得到的警告。简而言之，如果您需要使用动态表单呈现和复杂的表单验证(跨字段验证、自定义验证器等(，请使用响应式表单，并将模板驱动表单用于需要简单验证的更简单表单。

现在回到你的问题。在响应式窗体(在您的特定示例中(中，可以通过以下方式设置值：

this.gGroup.controls[this.groupControl].setValue()

请查看以下链接：https://stackblitz.com/edit/angular-kskgbp

希望这有帮助。

Answer 3

如果我们想为formGroup中的所有formControl设置值，那么您可以使用setValue或者如果我们想将值设置为formGroup中的任何一个formControl，那么我们可以选择patchValue

setValue(假设 formGroup 有 2 个 formControls(

formgroup.setValue({name: ‘Mocrosoft’, age: ‘25’});

补丁值

formgroup.patchValue({name:’Mocrosoft’});

或者你可以做，

this.yourFormgroup.get("yourFormControl").setValue("yourValue");

Answer 4

试试我创建的以下示例。 .HTML：

<form [formGroup]="myform" (ngSubmit)="onSubmit()">
<label for="grouplabel">Animals</label>
<select formControlName="animalName" class="form-control">
<option *ngFor="let animal of animals">{{animal.name}}</option>
</select>
</form>

打字稿：

myform: FormGroup;
animals: String[] = ["cat", "cow", "elephant"];
constructor(private formBuilder: FormBuilder) {
this.myform = this.formBuilder.group({
animalName : [""]
})`enter code here`
}

现场示例：https://stackblitz.com/edit/angular-1bmzur