pnp/sp PeoplePicker 中的必需属性不起作用

Question

我对 pnp/sp PeoplePicker 有疑问。 PeoplePicker 具有“必需”属性，但当我在表单中使用它时，它会被忽略。

这是我的 PeoplePicker 代码：

<PeoplePicker
required={true}
context={this.props.spContext}
personSelectionLimit={1}
onChange={this.hcRequestorPP}
showHiddenInUI={false}
principalTypes={[PrincipalType.User]}
ensureUser={true}
resolveDelay={1000}
defaultSelectedUsers={this.props.pRequestor}
disabled={false} />

我做错了什么？

Answer 1

嘿嘿， 你没有做错任何事 :-) 根据我的知识，必填属性在人员选择器标签旁边放置了星号 - 仅此而已。

如果用户在人员选择器字段中输入了某些内容，如果要检查表单，则必须自己检查。

我的表单版本是：

1. 每个表单值都存储在状态中。
2. 每个表单字段及其定义（名称、类型、必填项...）都存储在 props（或 state、或 const 等）中。
3. 在提交表单之前，我正在检查是否填写了每个必需的值（代码如下）
4. 如果未填写，我会在该字段下方放置错误消息。

开始的好例子在这里：https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-list-form

需要检查

let requiredError: boolean = false;
let fieldErrors: { [fieldName: string]: string } = {...this.state.fieldErrors};
// check required
for (let i: number = 0; i < this.state.fieldsSchema.length; i++) {
  if ((this.state.fieldsSchema[i].Required) && (!this.state.data[this.state.fieldsSchema[i].InternalName]) && (this.state.fieldsSchema[i].InternalName !== 'Aktivita')) {
    requiredError = true;
    fieldErrors = {
      ...fieldErrors,
      [this.state.fieldsSchema[i].InternalName]: strings.FormFields.RequiredValueMessage
    };
  }
}
if (requiredError === true) {
  this.setState({
    ...this.state,
    fieldErrors: fieldErrors,
    requiredFieldEmpty: requiredError
  });
  return;
}