Specifies if the initial values will be validated, when the component is loaded

Author: geltapatio

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -164,6 +164,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | anchorId | string | no | Set the anchorid to a child term in the TermSet to be able to select terms from that level and below. |
 | termActions | ITermActions | no | Allows to execute custom action on the term like e.g. get other term labelsITermActions. |
 | hideTagsNotAvailableForTagging | boolean | no | Specifies if the tags marked with 'Available for tagging' = false should be hidden |
+| validateOnLoad | boolean | no | Specifies if the initial values will be validated, when the component is loaded. Default value is false |
 | hideDeprecatedTags | boolean | no | Specifies if deprecated tags  should be hidden |
 | placeholder | string | no | Short text hint to display in empty picker |
 

src/controls/taxonomyPicker/ITaxonomyPicker.ts

@@ -9,9 +9,9 @@ import { ExtensionContext } from '@microsoft/sp-extension-base';
  * PropertyFieldTermPickerHost properties interface
 //  */
 export interface ITaxonomyPickerProps  {
-   /**
-   * Property field label displayed on top
-   */
+  /**
+  * Property field label displayed on top
+  */
   label: string;
   /**
    * TermSet Picker Panel title
@@ -79,6 +79,11 @@ export interface ITaxonomyPickerProps  {
    */
   placeholder?: string;
 
+  /**
+   * Specifies if the initial values will be validated, when the component is loaded
+   */
+  validateOnLoad?: boolean;
+
   /**
    * The method is used to get the validation error message and determine whether the input value is valid or not.
    *

src/controls/taxonomyPicker/TaxonomyPicker.tsx

@@ -54,6 +54,14 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     this.onSave = this.onSave.bind(this);
     this.termsChanged = this.termsChanged.bind(this);
     this.termsFromPickerChanged = this.termsFromPickerChanged.bind(this);
+    this.termsService = new SPTermStorePickerService(this.props, this.props.context);
+  }
+
+  /**
+   * componentDidMount lifecycle hook
+   */
+  public componentDidMount() {
+    this.validateTerms();
   }
 
   /**
@@ -77,11 +85,34 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
     }
   }
 
+   /**
+   * it checks, if all entries still exist in term store. if allowMultipleSelections is true. it have to validate all values
+   */
+  private async validateTerms() {
+    let isValidateOnLoad = this.props.validateOnLoad && this.props.initialValues != null && this.props.initialValues.length >= 1;
+    if (isValidateOnLoad) {
+      this.props.initialValues.forEach(async pickerTerm => {
+        if (pickerTerm.termSet == null) {
+          return;
+        }
+
+        this.termsService.getAllTerms(pickerTerm.termSet, this.props.hideDeprecatedTags, this.props.hideTagsNotAvailableForTagging).then((response: ITermSet) => {
+          let selectedTerms = response ? response : null;
+          if (selectedTerms == null) {
+            this.setState({
+              errorMessage: `The selected term '${pickerTerm.name}' could not be found in term store.`
+            });
+          }
+        });
+      });
+    }
+  }
+
   /**
    * Loads the list from SharePoint current web site
    */
   private loadTermStores(): void {
-    this.termsService = new SPTermStorePickerService(this.props, this.props.context);
+
 
     if (this.props.termActions && this.props.termActions.initialize) {
       this.props.termActions.initialize(this.termsService);