如何使用 FormControl 将值设置为 Angular 中的 Form
How to set value to Form in Angular using FormControl
<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>
字段的值为Select?
我查看了文档,https://angular.io/api/forms/FormControlName#use-with-ngmodel但仍然没有可以帮助我的示例。
尝试:
this.gGroup.get('groupControl').setValue('Select');
我想出了一个办法:
<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]);
检查我做的这个例子:
将 Reactive Forms 和 Template Driven Forms 混合在一起不是一个好主意,也就是说 formGroup/formControlName 和 ngModel 绑定在同一个表单控件中。
如果我没记错的话,这在 Angular 6 中已弃用,并将在 Angular 7 中删除。至少那是我几天前在控制台中收到的警告。简而言之,如果您需要使用动态表单呈现和复杂的表单验证(跨字段验证、自定义验证器等),请使用响应式表单,而对于需要简单验证的更简单的表单,请使用模板驱动表单。
现在回到你的问题。在 Reactive Forms 中(在您的特定示例中),可以通过以下方式设置值:
this.gGroup.controls[this.groupControl].setValue()
请检查以下内容link:https://stackblitz.com/edit/angular-kskgbp
希望对您有所帮助。
如果我们想为 formGroup
中的所有 formControl
设置值,那么您可以使用 setValue
或者如果我们想为 [=] 中的任何一个设置值13=] 在 formGroup
中然后我们可以使用 patchValue
setValue(假设 formGroup 有 2 个 formControl)
formgroup.setValue({name: ‘Mocrosoft’, age: ‘25’});
补丁值
formgroup.patchValue({name:’Mocrosoft’});
或者你也可以,
this.yourFormgroup.get("yourFormControl").setValue("yourValue");
试试我创建的以下示例。
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`
}
<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>
字段的值为Select?
我查看了文档,https://angular.io/api/forms/FormControlName#use-with-ngmodel但仍然没有可以帮助我的示例。
尝试:
this.gGroup.get('groupControl').setValue('Select');
我想出了一个办法:
<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]);
检查我做的这个例子:
将 Reactive Forms 和 Template Driven Forms 混合在一起不是一个好主意,也就是说 formGroup/formControlName 和 ngModel 绑定在同一个表单控件中。
如果我没记错的话,这在 Angular 6 中已弃用,并将在 Angular 7 中删除。至少那是我几天前在控制台中收到的警告。简而言之,如果您需要使用动态表单呈现和复杂的表单验证(跨字段验证、自定义验证器等),请使用响应式表单,而对于需要简单验证的更简单的表单,请使用模板驱动表单。
现在回到你的问题。在 Reactive Forms 中(在您的特定示例中),可以通过以下方式设置值:
this.gGroup.controls[this.groupControl].setValue()
请检查以下内容link:https://stackblitz.com/edit/angular-kskgbp
希望对您有所帮助。
如果我们想为 formGroup
中的所有 formControl
设置值,那么您可以使用 setValue
或者如果我们想为 [=] 中的任何一个设置值13=] 在 formGroup
中然后我们可以使用 patchValue
setValue(假设 formGroup 有 2 个 formControl)
formgroup.setValue({name: ‘Mocrosoft’, age: ‘25’});
补丁值
formgroup.patchValue({name:’Mocrosoft’});
或者你也可以,
this.yourFormgroup.get("yourFormControl").setValue("yourValue");
试试我创建的以下示例。 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`
}