Angular 4.x 动态创建表单实例

本文将介绍如何动态创建表单组件,我们最终实现的效果如下:

在阅读本文之前,请确保你已经掌握 Angular 响应式表单和动态创建组件的相关知识,如果对相关知识还不了解,推荐先阅读一下 Angular 4.x Reactive Forms和 Angular 4.x 动态创建组件 这两篇文章。对于已掌握的读者,我们直接进入主题。

创建动态表单

创建 DynamicFormModule

在当前目录先创建 dynamic-form 目录,然后在该目录下创建 dynamic-form.module.ts 文件,文件内容如下:

dynamic-form/dynamic-form.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
 imports: [
 CommonModule,
 ReactiveFormsModule
 ]
})
export class DynamicFormModule {}

创建完 DynamicFormModule 模块,接着我们需要在 AppModule 中导入该模块:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DynamicFormModule } from './dynamic-form/dynamic-form.module';

import { AppComponent } from './app.component';

@NgModule({
 imports: [BrowserModule, DynamicFormModule],
 declarations: [AppComponent],
 bootstrap: [AppComponent]
})
export class AppModule { }

创建 DynamicForm 容器

进入 dynamic-form 目录,在创建完 containers 目录后,继续创建 dynamic-form 目录,然后在该目录创建一个名为 dynamic-form.component.ts 的文件,文件内容如下:

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
 selector: 'dynamic-form',
 template: `
 <form [formGroup]="form">
 </form>
 `
})
export class DynamicFormComponent implements OnInit {
 @Input()
 config: any[] = [];

 form: FormGroup;

 constructor(private fb: FormBuilder) {}

 ngOnInit() {
 this.form = this.createGroup();
 }

 createGroup() {
 const group = this.fb.group({});
 this.config.forEach(control => group.addControl(control.name, this.fb.control('')));
 return group;
 }
}

由于我们的表单是动态的,我们需要接受一个数组类型的配置对象才能知道需要动态创建的内容。因此,我们定义了一个 config 输入属性,用于接收数组类型的配置对象。

此外我们利用了 Angular 响应式表单,提供的 API 动态的创建 FormGroup 对象。对于配置对象中的每一项,我们要求该项至少包含两个属性,即 (type) 类型和 (name) 名称:

  1. type - 用于设置表单项的类型,如 inputselectbutton
  2. name - 用于设置表单控件的 name 属性

createGroup() 方法中,我们循环遍历输入的 config 属性,然后利用 FormGroup 对象提供的 addControl() 方法,动态地添加新建的表单控件。

接下来我们在 DynamicFormModule 模块中声明并导出新建的 DynamicFormComponent 组件:

import { DynamicFormComponent } from './containers/dynamic-form/dynamic-form.component';

@NgModule({
 imports: [
 CommonModule,
 ReactiveFormsModule
 ],
 declarations: [
 DynamicFormComponent
 ],
 exports: [
 DynamicFormComponent
 ]
})
export class DynamicFormModule {}

现在我们已经创建了表单,让我们实际使用它。

使用动态表单

打开 app.component.ts 文件,在组件模板中引入我们创建的 dynamic-form 组件,并设置相关的配置对象,具体示例如下:

app.component.ts

import { Component } from '@angular/core';

interface FormItemOption {
 type: string;
 label: string;
 name: string;
 placeholder?: string;
 options?: string[]
}

@Component({
 selector: 'exe-app',
 template: `
 <div>
 <dynamic-form [config]="config"></dynamic-form>
 </div>
 `
})
export class AppComponent {
 config: FormItemOption[] = [
 {
 type: 'input',
 label: 'Full name',
 name: 'name',
 placeholder: 'Enter your name'
 },
 {
 type: 'select',
 label: 'Favourite food',
 name: 'food',
 options: ['Pizza', 'Hot Dogs', 'Knakworstje', 'Coffee'],
 placeholder: 'Select an option'
 },
 {
 type: 'button',
 label: 'Submit',
 name: 'submit'
 }
 ];
}

上面代码中,我们在 AppComponent 组件类中设置了 config 配置对象,该配置对象中设置了三种类型的表单类型。对于每个表单项的配置对象,我们定义了一个 FormItemOption 数据接口,该接口中我们定义了三个必选属性:type、label 和 name 及两个可选属性:options 和 placeholder。下面让我们创建对应类型的组件。

自定义表单项组件

FormInputComponent

dynamic-form 目录,我们新建一个 components 目录,然后创建 form-inputform-select form-button 三个文件夹。创建完文件夹后,我们先来定义 form-input 组件:

form-input.component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
 selector: 'form-input',
 template: `
 <div [formGroup]="group">
 <label>{{ config.label }}</label>
 <input
 type="text"
 [attr.placeholder]="config.placeholder"
 [formControlName]="config.name" />
 </div>
 `
})
export class FormInputComponent {
 config: any;
 group: FormGroup;
}

上面代码中,我们在 FormInputComponent 组件类中定义了 config group 两个属性,但我们并没有使用 @Input 装饰器来定义它们,因为我们不会以传统的方式来使用这个组件。接下来,我们来定义 select button 组件。

FormSelectComponent

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
 selector: 'form-select',
 template: `
 <div [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>
 `
})
export class FormSelectComponent {
 config: Object;
 group: FormGroup;
}

FormSelectComponent 组件与 FormInputComponent 组件的主要区别是,我们需要循环配置中定义的options属性。这用于向用户显示所有的选项,我们还使用占位符属性,作为默认的选项。

FormButtonComponent

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
 selector: 'form-button',
 template: `
 <div [formGroup]="group">
 <button type="submit">
 {{ config.label }}
 </button>
 </div>
 `
})
export class FormButtonComponent{
 config: Object;
 group: FormGroup;
}

以上代码,我们只是定义了一个简单的按钮,它使用 config.label 的值作为按钮文本。与所有组件一样,我们需要在前面创建的模块中声明这些自定义组件。打开 dynamic-form.module.ts 文件并添加相应声明:

// ...
import { FormButtonComponent } from './components/form-button/form-button.component';
import { FormInputComponent } from './components/form-input/form-input.component';
import { FormSelectComponent } from './components/form-select/form-select.component';

@NgModule({
 // ...
 declarations: [
 DynamicFormComponent,
 FormButtonComponent,
 FormInputComponent,
 FormSelectComponent
 ],
 exports: [
 DynamicFormComponent
 ]
})
export class DynamicFormModule {}

到目前为止,我们已经创建了三个组件。若想动态的创建这三个组件,我们将定义一个指令,该指令的功能跟 router-outlet 指令类似。接下来在 components 目录内部,我们新建一个 dynamic-field 目录,然后创建 dynamic-field.directive.ts 文件。该文件的内容如下:

import { Directive, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Directive({
 selector: '[dynamicField]'
})
export class DynamicFieldDirective {
 @Input()
 config: Object;

 @Input()
 group: FormGroup;
}

我们将指令的 selector 属性设置为 [dynamicField],因为我们将其应用为属性而不是元素。

这样做的好处是,我们的指令可以应用在 Angular 内置的 <ng-container> 指令上。 <ng-container> 是一个逻辑容器,可用于对节点进行分组,但不作为 DOM 树中的节点,它将被渲染为 HTML中的 comment 元素。因此配合 <ng-container> 指令,我们只会在 DOM 中看到我们自定义的组件,而不会看到 <dynamic-field> 元素 (因为 DynamicFieldDirective 指令的 selector 被设置为 [dynamicField] )。

另外在指令中,我们使用 @Input 装饰器定义了两个输入属性,用于动态设置 config group 对象。接下来我们开始动态渲染组件。

动态渲染组件,我们需要用到 ComponentFactoryResolver ViewContainerRef 两个对象。ComponentFactoryResolver 对象用于创建对应类型的组件工厂 (ComponentFactory),而 ViewContainerRef 对象用于表示一个视图容器,可添加一个或多个视图,通过它我们可以方便地创建和管理内嵌视图或组件视图。

让我们在 DynamicFieldDirective 指令构造函数中,注入相关对象,具体代码如下:

import { ComponentFactoryResolver, Directive, Input, OnInit,
 ViewContainerRef } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Directive({
 selector: '[dynamicField]'
})
export class DynamicFieldDirective implements OnInit {
 @Input()
 config;

 @Input()
 group: FormGroup;

 constructor(
 private resolver: ComponentFactoryResolver,
 private container: ViewContainerRef
 ) {}

 ngOnInit() {

 }
}

上面代码中,我们还添加了 ngOnInit 生命周期钩子。由于我们允许使用 input select 类型来声明组件的类型,因此我们需要创建一个对象来将字符串映射到相关的组件类,具体如下:

// ...
import { FormButtonComponent } from '../form-button/form-button.component';
import { FormInputComponent } from '../form-input/form-input.component';
import { FormSelectComponent } from '../form-select/form-select.component';

const components = {
 button: FormButtonComponent,
 input: FormInputComponent,
 select: FormSelectComponent
};

@Directive(...)
export class DynamicFieldDirective implements OnInit {
 // ...
}

这将允许我们通过 components['button'] 获取对应的 FormButtonComponent 组件类,然后我们可以把它传递给 ComponentFactoryResolver 对象以获取对应的 ComponentFactory (组件工厂):

// ...
const components = {
 button: FormButtonComponent,
 input: FormInputComponent,
 select: FormSelectComponent
};

@Directive(...)
export class DynamicFieldDirective implements OnInit {
 // ...
 ngOnInit() {
 const component = components[this.config.type];
 const factory = this.resolver.resolveComponentFactory<any>(component);
 }
 // ...
}

现在我们引用了配置中定义的给定类型的组件,并将其传递给 ComponentFactoryRsolver 对象提供的resolveComponentFactory() 方法。您可能已经注意到我们在 resolveComponentFactory 旁边使用了 <any>,这是因为我们要创建不同类型的组件。此外我们也可以定义一个接口,然后每个组件都去实现,如果这样的话 any 就可以替换成我们已定义的接口。

现在我们已经有了组件工厂,我们可以简单地告诉我们的 ViewContainerRef 为我们创建这个组件:

@Directive(...)
export class DynamicFieldDirective implements OnInit {
 // ...
 component: any;

 ngOnInit() {
 const component = components[this.config.type];
 const factory = this.resolver.resolveComponentFactory<any>(component);
 this.component = this.container.createComponent(factory);
 }
 // ...
}

我们现在已经可以将 config group 传递到我们动态创建的组件中。我们可以通过 this.component.instance 访问到组件类的实例:

@Directive(...)
export class DynamicFieldDirective implements OnInit {
 // ...
 component;

 ngOnInit() {
 const component = components[this.config.type];
 const factory = this.resolver.resolveComponentFactory<any>(component);
 this.component = this.container.createComponent(factory);
 this.component.instance.config = this.config;
 this.component.instance.group = this.group;
 }
 // ...
}

接下来,让我们在 DynamicFormModule 中声明已创建的 DynamicFieldDirective 指令:

// ...
import { DynamicFieldDirective } from './components/dynamic-field/dynamic-field.directive';

@NgModule({
 // ...
 declarations: [
 DynamicFieldDirective,
 DynamicFormComponent,
 FormButtonComponent,
 FormInputComponent,
 FormSelectComponent
 ],
 exports: [
 DynamicFormComponent
 ]
})
export class DynamicFormModule {}

如果我们直接在浏览器中运行以上程序,控制台会抛出异常。当我们想要通过 ComponentFactoryResolver 对象动态创建组件的话,我们需要在 @NgModule 配置对象的一个属性 - entryComponents 中,声明需动态加载的组件。

@NgModule({
 // ...
 entryComponents: [
 FormButtonComponent,
 FormInputComponent,
 FormSelectComponent
 ]
})
export class DynamicFormModule {}

基本工作都已经完成,现在我们需要做的就是更新 DynamicFormComponent 组件,应用我们之前已经 DynamicFieldDirective 实现动态组件的创建:

@Component({
 selector: 'dynamic-form',
 template: `
 <form
 class="dynamic-form"
 [formGroup]="form">
 <ng-container
 *ngFor="let field of config;"
 dynamicField
 [config]="field"
 [group]="form">
 </ng-container>
 </form>
 `
})
export class DynamicFormComponent implements OnInit {
 // ...
}

正如我们前面提到的,我们使用 <ng-container>作为容器来重复我们的动态字段。当我们的组件被渲染时,这是不可见的,这意味着我们只会在 DOM 中看到我们的动态创建的组件。

此外我们使用 *ngFor 结构指令,根据 config (数组配置项) 动态创建组件,并设置 dynamicField 指令的两个输入属性:config 和 group。最后我们需要做的是实现表单提交功能。

表单提交

我们需要做的是为我们的 <form> 组件添加一个 (ngSubmit) 事件的处理程序,并在我们的动态表单组件中新增一个 @Output 输出属性,以便我们可以通知使用它的组件。

import { Component, Input, Output, OnInit, EventEmitter} from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
 selector: 'dynamic-form',
 template: `
 <form
 [formGroup]="form"
 (ngSubmit)="submitted.emit(form.value)">
 <ng-container
 *ngFor="let field of config;"
 dynamicField
 [config]="field"
 [group]="form">
 </ng-container>
 </form>
 `
})
export class DynamicFormComponent implements OnInit {
 @Input() config: any[] = [];

 @Output() submitted: EventEmitter<any> = new EventEmitter<any>();
 // ...
}

最后我们同步更新一下 app.component.ts 文件:

import { Component } from '@angular/core';

@Component({
 selector: 'exe-app',
 template: `
 <div class="app">
 <dynamic-form
 [config]="config"
 (submitted)="formSubmitted($event)">
 </dynamic-form>
 </div>
 `
})
export class AppComponent {
 // ...
 formSubmitted(value: any) {
 console.log(value);
 }
}

Toddmotto 大神线上完整代码请访问- toddmott/angular-dynamic-forms

我有话说

在自定义表单控件组件中 [formGroup]="group" 是必须的么?

form-input.component.ts

<div [formGroup]="group">
 <label>{{ config.label }}</label>
 <input
 type="text"
 [attr.placeholder]="config.placeholder"
 [formControlName]="config.name" />
</div>

如果去掉 <div> 元素上的 [formGroup]="group" 属性,重新编译后浏览器控制台将会抛出以下异常:

Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).
Example:

<div [formGroup]="myGroup">
 <input formControlName="firstName">
</div>

In your class:
this.myGroup = new FormGroup({
 firstName: new FormControl()
});

formControlName 指令中,初始化控件的时候,会验证父级指令的类型:

private _checkParentType(): void {
 if (!(this._parent instanceof FormGroupName) &&
 this._parent instanceof AbstractFormGroupDirective) {
 ReactiveErrors.ngModelGroupException();
 } else if (
 !(this._parent instanceof FormGroupName) &&
 !(this._parent instanceof FormGroupDirective) &&
 !(this._parent instanceof FormArrayName)) {
 ReactiveErrors.controlParentException();
 }
 }

那为什么要验证,是因为要把新增的控件添加到对应 formDirective 对象中:

private _setUpControl() {
 this._checkParentType();
 this._control = this.formDirective.addControl(this);
 if (this.control.disabled && this.valueAccessor !.setDisabledState) {
 this.valueAccessor !.setDisabledState !(true);
 }
 this._added = true;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Web前端框架Angular4.0.0 正式版发布

    前言 angular4.0.0正式版现在可以使用了.这是自我们宣布angular改版后,首次发布的专业版本.它向下兼容,支持所有使用了angular2.x.x版本的应用程序. 我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进.我们努力让开发者们能够很容易的接受angular4.0.0. 新版本的特性 •更轻量化.更快 在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快.但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重

  • Angular 4.x 路由快速入门学习

    路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据.这允许我们通过控制不同的路由,获取不同的数据,从而渲染不同的页面. 接下来我们将按照以下目录的内容,介绍 Angular 的路由.具体目录如下: 目录 Installing the router Base href Using the router RouterModule.forRoot RouterModule.forChild Configuring a route Displaying r

  • 详解Angular 4.x 动态创建组件

    动态创建组件 这篇文章我们将介绍在 Angular 中如何动态创建组件. 定义 AlertComponent 组件 首先,我们需要定义一个组件. exe-alert.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: "exe-alert", template: ` <h1>Alert {{type}}</h1> `, }) export cl

  • Angular 4 指令快速入门教程

    本系列教程的开发环境及开发语言: Angular 4 + Angular CLI TypeScript 基础知识 Angular CLI 基本使用 安装 Angular CLI (可选) npm install -g @angular/cli 创建新的项目 ng new PROJECT-NAME 启动本地服务器 cd PROJECT-NAME ng serve Angular 指令简介 Angular 的指令分为三种: 组件(Component directive):用于构建UI组件,继承于

  • Angular4 中常用的指令入门总结

    前言 本文主要给大家介绍了关于Angular4 常用指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: NgIf <div *ngIf="false"></div> <!-- never displayed --> <div *ngIf="a > b"></div> <!-- displayed if a is more than b --> <div *ngIf=&

  • Angular2平滑升级到Angular4的步骤详解

    前言 Angular4终于在两天前发布了正式版本,那么怎么升级呢?其实Angular2和Angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码. Angular4现已发布  http://www.jb51.net/article/109685.htm 为什么跳过Angular 3? 根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch

  • 详解Angular 4 表单快速入门

    基础知识 Angular CLI 基本使用 安装 Angular CLI (可选) npm install -g @angular/cli 创建新的项目 ng new PROJECT-NAME 启动本地服务器 cd PROJECT-NAME ng serve Angular Forms 简介 Angular 4 中有两种表单: Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) Reactive Forms - 响应式表单 本文主要

  • Angular 4.X开发实践中的踩坑小结

    本文主要给大家分享了关于Angular 4.X开发中与到的一些踩坑经验,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.使用ngIf或者ngSwitch出错 在html文件中使用ngIf或者ngSwitch时,会解析出错,错误提示如下: Error: Template parse errors: Can't bind to 'ngSwitch' since it isn't a known property of 'div'. 这个是因为没有在此Component所在的Module中导入

  • Angular 4.x 动态创建表单实例

    本文将介绍如何动态创建表单组件,我们最终实现的效果如下: 在阅读本文之前,请确保你已经掌握 Angular 响应式表单和动态创建组件的相关知识,如果对相关知识还不了解,推荐先阅读一下 Angular 4.x Reactive Forms和 Angular 4.x 动态创建组件 这两篇文章.对于已掌握的读者,我们直接进入主题. 创建动态表单 创建 DynamicFormModule 在当前目录先创建 dynamic-form 目录,然后在该目录下创建 dynamic-form.module.ts

  • angular学习之动态创建表单的方法

    准备工作 使用ng new async-form创建一个新工程,在app.module.ts中引入ReactiveFormsModule模块并在根模块中导入 import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ ReactiveFormsModule ] }) 构建表单元素的基类 export class QuestionBase<T> { value: T;//表单元素的值 key: stri

  • MyBatis动态创建表的实例代码

    项目中业务需求的不同,有时候我们需要动态操作数据表(如:动态建表.操作表字段等).常见的我们会把日志.设备实时位置信息等存入数据表,并且以一定时间段生成一个表来存储,log_201806.log_201807等.在这里我们用MyBatis实现,会用到动态SQL. 动态SQL是Mybatis的强大特性之一,MyBatis在对sql语句进行预编译之前,会对sql进行动态解析,解析为一个BoundSql对象,也是在此对动态sql进行处理. 在动态sql解析过程中,#{ }与${ }的效果是不一样的:

  • vue和iview结合动态生成表单实例

    目录 一.构建myform组建 二.构建myFormItem组建 三.构建函数式组件mycontrl组件 四.用户输入的时候需要对表单项中进行各种验证或者逻辑 五.表单输入完成获取表单中的值 六.在要用到表单的页面使用 在项目中,表单作为用户输入占用很重要的一部分,目前的前端框架,基本对表单进行了一些简单的封装,如果输入项很多,以iview为例,会有一大堆的类似: <FormItem label="Input">             <Input v-model=

  • Vue表单实例代码

    什么是 Vue.js? Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js 特点 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 数据驱动: 自动追踪依赖的模板表达式和计算属性. 组件化: 用解耦.可复用的组件来构造界面. 轻量: ~24kb min+gzip,无依赖. 快速: 精确有效的异步批量 DOM 更新. 模块友好: 通过 NPM 或 Bower

  • 如何使用Bootstrap创建表单

    Bootstrap 表单 在本章中,我们将学习如何使用 Bootstrap 创建表单.Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: - 向父 <form> 元素添加 role="form". - 把标签和控件放在一个带有 class .form-group 的 中.这是获取最佳间距所必需的. - 向所有的

  • Yii2创建表单(ActiveForm)方法详解

    本文实例讲述了Yii2创建表单(ActiveForm)的方法.分享给大家供大家参考,具体如下: 由于表单涉及到一些验证方面的信息,属性设置又比较多.比较复杂,所以哪里有什么不正确的地方请留言指点 目录 表单的生成 表单中的方法   ActiveForm::begin()方法   ActiveForm::end()方法   getClientOptions()方法   其它方法:errorSummary.validate.validateMultiple 表单中的参数   表单form自身的属性

  • javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 复制代码 代码如下: var newInput = document.createElement("input"); 2.设定相关属性,如name,type等  复制代码 代码如下: newInput.type=mytype;   newInput.name="input1"

  • JavaScript DOM学习第六章 表单实例

    表单实例 这是一个表单的实力.这里有一个小问题:因为我的服务器现在不支持,所以表单不能提交.我会打印出你的输入,然后返回一个false,这样表单就没有被提交. onSubmit的代码做了两件事情:检查你是否在四个文本框里面都填写了数据,然后把所有的元素都连接起来打印在下面的文本区域中. 原文中有实例,需要童鞋请移步,我就不搬过来了. 检测文本区域 这段代码会检测用户是否在文本框内输入了内容.他会忽略复选框和单选框,但是会总提醒用户选择select box,就算你选了,也会提醒,因为他的值总是nu

随机推荐