Skip to content

Commit 2bda083

Browse files
bplok20010bplok20010
committed
1. disableValidator属性支持
1 parent 78dfd4b commit 2bda083

File tree

5 files changed

+86
-26
lines changed

5 files changed

+86
-26
lines changed

‎examples/demos/demo1.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export default class DEMO extends Component {
8484
return (
8585
<div>
8686
<Form
87+
// disableValidator
8788
labelWidth={80}
8889
// validateTrigger={["change", "blur"]}
8990
getDefaultFieldValue={() => ""}

‎examples/demos/demo2.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -109,53 +109,53 @@ export default class DEMO extends Component {
109109
</FormItem>
110110
<FormItem
111111
help="必填选项"
112-
name="name"
112+
name="name2"
113113
label="姓名"
114114
inline
115115
>
116116
<Input />
117117
</FormItem>
118-
<FormItem name="name" label="姓名" inline>
118+
<FormItem name="name3" label="姓名" inline>
119119
<Input size="small" />
120120
</FormItem>
121121
<FormItem
122122
labelWidth={100}
123-
name="name"
123+
name="name4"
124124
label="姓名"
125125
>
126126
<Input />
127127
</FormItem>
128128
<FormItem
129-
name="name"
129+
name="name5"
130130
labelWidth={100}
131131
label="姓名"
132132
inline
133133
>
134134
<Input />
135135
</FormItem>
136-
<FormItem name="name" label="姓名" inline>
136+
<FormItem name="name6" label="姓名" inline>
137137
<Input />
138138
</FormItem>
139139
<FormItem
140-
name="name"
140+
name="name7"
141141
labelPosition="top"
142142
label="姓名"
143143
>
144144
<Input />
145145
</FormItem>
146146
<FormItem
147-
name="name"
147+
name="name8"
148148
labelPosition="top"
149149
label="姓名"
150150
inline
151151
>
152152
<Input />
153153
</FormItem>
154-
<FormItem name="name" label="姓名">
154+
<FormItem name="name9" label="姓名">
155155
<NativeInput component="input" />
156156
</FormItem>
157157
<div>
158-
{form.isFieldValidating("name")
158+
{form.isFieldValidating("name9")
159159
? "数据校验中..."
160160
: null}
161161
</div>
@@ -211,7 +211,7 @@ export default class DEMO extends Component {
211211
reject(
212212
"校验失败"
213213
),
214-
1000
214+
2000
215215
);
216216
}
217217
);

‎src/Form.tsx‎

Lines changed: 69 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ const defaultProps: IFormProps = {
6767
prefixCls: "nex-form",
6868
className: "",
6969
style: {},
70-
//实验性质，有序可能移除
7170
disableValidator: false,
7271
validators: {},
7372
path2obj: true,
@@ -106,7 +105,7 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
106105
fields: FormItem[] = [];
107106
_validateCb: ValueChangeCallback[] = [];
108107

109-
state = {
108+
state: IFormState = {
110109
formError: {},
111110
validatingFields: {},
112111
formValue: this.props.defaultFormValue || {},
@@ -130,6 +129,17 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
130129
}
131130
}
132131

132+
getFieldByName(name: string) {
133+
const fields = this.fields;
134+
for (let i = 0; i < fields.length; i++) {
135+
if (name === fields[i].props.name) {
136+
return fields[i];
137+
}
138+
}
139+
140+
return null;
141+
}
142+
133143
getInitialFormValue() {
134144
const initialFormValue: FormValue = {};
135145

@@ -296,17 +306,48 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
296306
this._validateCb = [];
297307
}
298308

309+
isDisableValidator(name?: string) {
310+
if (arguments.length) {
311+
return this.isDisableValidatorField(name as string);
312+
}
313+
314+
return this.props.disableValidator;
315+
}
316+
317+
isDisableValidatorField(name: string) {
318+
const field = this.getFieldByName(name);
319+
if (!field) return true;
320+
321+
return field.getProp("disableValidator", false);
322+
}
323+
299324
hasError(name: string) {
325+
if (this.isDisableValidatorField(name)) {
326+
return false;
327+
}
328+
300329
const { formError } = this.state;
301330

302331
return formError[name] != null; // null or undefined
303332
}
304333

305334
getError(name: string) {
335+
if (this.isDisableValidatorField(name)) {
336+
return null;
337+
}
338+
306339
const { formError } = this.state;
307340
return formError[name];
308341
}
309342

343+
getErrors() {
344+
if (this.isDisableValidator()) {
345+
return {};
346+
}
347+
348+
return this.state.formError;
349+
}
350+
310351
cleanError(name: string) {
311352
const { formError } = this.state;
312353

@@ -323,6 +364,10 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
323364
}
324365

325366
setError(name: string, message: any) {
367+
if (this.isDisableValidatorField(name)) {
368+
return;
369+
}
370+
326371
const { formError } = this.state;
327372
this.setState({
328373
formError: {
@@ -341,8 +386,10 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
341386
setErrors(errors: Record<string, any>) {
342387
const { formError } = this.state;
343388
this.setState({
344-
...formError,
345-
...errors,
389+
formError: {
390+
...formError,
391+
...errors,
392+
},
346393
});
347394
}
348395

@@ -390,11 +437,16 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
390437
}
391438

392439
isFieldValidating(name: string) {
440+
if (this.isDisableValidatorField(name)) {
441+
return false;
442+
}
443+
393444
const validatingFields = this.state.validatingFields;
394445
return !!validatingFields[name];
395446
}
396447

397448
isValidating() {
449+
if (this.props.disableValidator) return false;
398450
if (this._isFormValidating) return true;
399451

400452
const validatingFields = this.state.validatingFields;
@@ -490,7 +542,12 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
490542
let asyncTimer: number | null = (setTimeout(() => {
491543
asyncTimer = null;
492544

493-
if (lockId !== this.fieldLocks[name]) return;
545+
if (
546+
lockId !== this.fieldLocks[name] ||
547+
this.isDisableValidatorField(name)
548+
) {
549+
return;
550+
}
494551

495552
this.setState({
496553
validatingFields: {
@@ -511,7 +568,10 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
511568
clearTimeout(asyncTimer);
512569
}
513570

514-
if (lockId !== this.fieldLocks[name]) {
571+
if (
572+
lockId !== this.fieldLocks[name] ||
573+
this.isDisableValidatorField(name)
574+
) {
515575
callback(errors, value, true /* abort state */);
516576
return;
517577
}
@@ -553,7 +613,7 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
553613
this._isFormValidating = true;
554614

555615
const updateFormState = () => {
556-
if (lockId !== this.formLockId) return;
616+
if (lockId !== this.formLockId || this.isDisableValidator()) return;
557617

558618
this.setState({
559619
formError,
@@ -564,7 +624,7 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
564624
const complete = (errors: ValidationError[] | null, name: string) => {
565625
validCounter--;
566626

567-
if (errors) {
627+
if (errors && !this.isDisableValidatorField(name)) {
568628
formError[name] = errors[0].message;
569629
allErrors.push(...errors);
570630
}
@@ -576,7 +636,7 @@ export class Form extends React.Component<Partial<IFormProps>, IFormState> {
576636
asyncUpdateTimer = null;
577637
}
578638

579-
if (lockId !== this.formLockId) {
639+
if (lockId !== this.formLockId || this.isDisableValidator()) {
580640
callback(
581641
allErrors.length ? allErrors : null,
582642
formValue,

‎src/FormItem.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export interface IFormItemProps {
6464
validateTrigger?: ValidateTrigger;
6565
inline?: boolean;
6666
renderControlExtra?: () => React.ReactNode;
67-
onChange?: (value: any) => void;
67+
onChange?: (value: any, e?: React.SyntheticEvent) => void;
6868
onFocus?: (e: React.FocusEvent) => void;
6969
onBlur?: (e: React.FocusEvent) => void;
7070
}
@@ -145,7 +145,7 @@ export class FormItem extends React.Component<Partial<IFormItemProps>> {
145145
return "validateDelay" in props ? props.validateDelay : validateDelay;
146146
}
147147

148-
reset(cb) {
148+
reset(cb?: ValueChangeCallback) {
149149
const form = this.getForm();
150150
const { name } = this.props;
151151
form.resetField(name, cb);
@@ -257,7 +257,7 @@ export class FormItem extends React.Component<Partial<IFormItemProps>> {
257257

258258
const _normalize = this.getFormProp(
259259
"normalizeFieldValue",
260-
(name: string, value: any) => value
260+
(_: string, value: any) => value
261261
);
262262

263263
if (!normalize) {
@@ -271,7 +271,7 @@ export class FormItem extends React.Component<Partial<IFormItemProps>> {
271271
return {
272272
value: this.getValue(),
273273
...customProps,
274-
onChange: value => {
274+
onChange: (value, e?: React.SyntheticEvent) => {
275275
const formValue = form.getFormValue();
276276
const prevValue = this.getValue();
277277

@@ -280,7 +280,7 @@ export class FormItem extends React.Component<Partial<IFormItemProps>> {
280280
}
281281

282282
this.handleChange(value, () => {
283-
onChange && onChange(value);
283+
onChange && onChange(value, e);
284284
customProps.onChange && customProps.onChange(value);
285285
});
286286
},
@@ -347,7 +347,6 @@ export class FormItem extends React.Component<Partial<IFormItemProps>> {
347347
renderExtra,
348348
children,
349349
} = this.props;
350-
//实验性质，有可能移除
351350
const disableValidator = this.getProp("disableValidator");
352351
const inline = this.getProp("inline");
353352
const labelPosition = this.getProp("labelPosition");

‎src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export type Validator = (
2222

2323
export type FormItemChildrenProps = {
2424
value: any;
25-
onChange: (value: any) => void;
25+
onChange: (value: any, e?: React.SyntheticEvent) => void;
2626
onFocus: (e: React.FocusEvent) => void;
2727
onBlur: (e: React.FocusEvent) => void;
2828
[x: string]: any;

0 commit comments

Comments
 (0)