- java - 不区分大小写的 File.equals 在区分大小写的文件系统上
- java - 如何在 java 中创建文件(不是文件夹)?
- java - 在 JaxB 中解码集合
- java - 开始使用 Eclipse RCP
我在我的第一个 Angular 项目中实现 react 形式,我无法弄清楚为什么选择的值没有被改变。对于普通文本的输入字段,它安静地工作,对于选择字段,什么也没有发生。我跟着几个教程,无法解决。表单加载完美,在控制台上没有错误。
我的组件.html:
<dynamic-form [config]="config" #form="dynamic-Form" (submit)="realizarLogin(form)">
</dynamic-form>
{{ form.valid }} {{ form.value | json }}
表单选择.component.html:
<div class="dynamic-field form-select" [formGroup]="group">
<label>{{ config.label }}</label>
<select [formControlName]="config.name">
<option value="">{{ config.placeholder }}</option>
<option *ngFor="let option of config.options">
{{ option }}
</option>
</select>
</div>
动态表单.component.html:
<form class="dynamic-form" [formGroup]="form">
<ng-container *ngFor="let field of config;" dynamicField [config]="field" [group]="form">
</ng-container>
</form>
动态表单.module.ts
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule
],
declarations: [
DynamicFieldDirective,
DynamicFormComponent,
FormButtonComponent,
FormInputComponent,
FormSelectComponent
],
exports: [
DynamicFormComponent
],
entryComponents: [
FormButtonComponent,
FormInputComponent,
FormSelectComponent
]
登录.component.ts:
export class LoginComponent implements AfterViewInit {
@ViewChild(DynamicFormComponent) form: DynamicFormComponent;
config: FieldConfig[] = [
{
type: 'input',
label: 'Full name',
name: 'name',
placeholder: 'Enter your name',
validation: [Validators.required, Validators.minLength(4)]
},
{
type: 'select',
label: 'Favourite Food',
name: 'food',
options: ['Pizza', 'Hot Dogs', 'Knakworstje', 'Coffee'],
placeholder: 'Select an option',
validation: [Validators.required]
},
{
label: 'Submit',
name: 'submit',
type: 'button',
}
];
ngAfterViewInit() {
let previousValid = this.form.valid;
this.form.changes.subscribe(() => {
if (this.form.valid !== previousValid) {
previousValid = this.form.valid;
this.form.setDisabled('submit', !previousValid);
}
});
this.form.setDisabled('submit', true);
this.form.setValue('name', 'Todd Motto');
}
submit(value: {[name: string]: any}) {
console.log(value);
}
}
编辑:
登录模块:
@NgModule({
imports: [
CommonModule,
LoginRoutingModule,
DynamicFormModule
],
declarations: [LoginComponent]
})
export class LoginModule {}
应用模块:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RetaguardaModule,
LoginModule,
AppRoutingModule
],
providers: [
LoginGuard,
LoginService,
Ambiente
],
bootstrap: [AppComponent]
})
export class AppModule { }
我通过显示要加载代码的结构来更改代码。问题是在登录模块没有打开。这是与我在问题页脚中放置的示例的唯一区别
请记住,对于数组的“名称”属性,“绑定(bind)”是有效的。该代码应根据以下示例工作: https://toddmotto.com/angular-dynamic-forms/
I noticed that in the example code what is printed on the console, it is an "object", in my case it is a DynamicFormComponent.
最佳答案
从 Materialise 中删除类时问题已解决,问题解决后其他人遇到了同样的问题,请点击可能解决方案的链接:
或者只是申请类(class)
<select [formControlName]="config.name" class="browser-default">
在输入标签中。
关于html - 带有选择控件的 Angular 2+ ReactiveForms,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44121014/
我已经开发了一个应用程序一个月了。我遇到了很多问题,几乎所有问题我都找到了解决方案,而不是打开线程,但有一个设计问题我还没有弄清楚。 假设我有一个名为 MonkeyComponent 的小组件,它只有
我正在尝试禁用reactive_forms中的提交按钮 当我执行此代码时: import 'package:reactive_forms/reactive_forms.dart'; final for
我在我的第一个 Angular 项目中实现 react 形式,我无法弄清楚为什么选择的值没有被改变。对于普通文本的输入字段,它安静地工作,对于选择字段,什么也没有发生。我跟着几个教程,无法解决。表单加
我有一个响应式(Reactive)表单,我想直接填充我的模型。 form.component.html ... many more fields
这个问题在这里已经有了答案: Angular - controlValueAccessor method writeValue() not being called (2 个回答) 2年前关闭。 我创
我正在创建一个由两个 FormArray、items 和 savedItems 组成的表单。在表单数组中的每个元素上都有一个按钮,可以从数组中删除该元素。 顶部/第一个 FormArray 从对象列表
我试图在表单上显示一个 FormControl 以保存电话国家/地区代码前缀,并且我希望它始终在左侧填充区域显示一个加号。我的赌注是在输入中使用 :before 元素,但令人惊讶的是我无法让它出现在
在构建更复杂的响应式表单时,我在多次嵌套 reactiveFormGroups 时偶然发现了一个问题。 所以我有两种情况: 表单组件 -> 表单局部组件 -> 自定义输入组件 表单组件 -> 自定义输
我有一个响应式(Reactive)表单,当用户在输入中按下 ESC 键时,我想在表单隐藏之前显示“你确定吗”模式。 一旦显示模态,我就会在控制台中收到以下异常: ERROR Error: Expres
我正在使用 angular5 reactivemodule 在我的应用程序中显示一个表单。我还使用了必需的验证器,它随后会将字段设置为红色并向用户显示错误消息。 它按预期工作,但是当我使用 重置表单时
我正在使用 Material Design 和 ReactiveForms 来处理级联下拉菜单。该代码有一个州的下拉列表,一旦选择,将过滤城市的下拉列表。 我找到了这个例子http://www.tal
我正在使用 Material Design 和 ReactiveForms 来处理级联下拉菜单。该代码有一个州的下拉列表,一旦选择,将过滤城市的下拉列表。 我找到了这个例子http://www.tal
我尝试使用 来自 Angular Material(不是 AngularJS)而不使用 react 形式。但是他们所有的例子都使用 react 形式...... 我尝试做的事情: 1. 当在 mat-
我在 ReactiveForm FormControl 上放置了一个货币属性指令,它在输入事件 (onKeyDown) 上使用 @HostListener 来移除输入时输入的所有无效字符(字母和符号)
给定一个组件,带有一个表单声明 ngOnInit() { this.form = this.fb.group({ address: [""], }); } 表单上的两个输入控件,都引用
大家好,我有一个 Formarray,其中有一组角色。在编辑期间,它会动态删除并添加该表单数组中的角色,直到这里一切正常,但是当我提交表单时,它会出现错误并且页面会刷新。 错误:类型错误:无法读取 n
我是一名优秀的程序员,十分优秀!