Angular Schema Form中select与checkbox的required验证失效求助

Hey there, I’ve run into this exact issue with Angular Schema Form before—required validation not firing for selects and checkboxes can be tricky because of how the library handles empty values and field types. Let’s break down how to fix both your fields:

1. Fixing the Select Field (designation) #

Your first mix-up was using type: "select" in the schema—schema types define data types (like string, number, boolean), not the UI component type. The UI type belongs in the form configuration instead. Here’s how to adjust it:

Updated Schema for designation #

$scope.schema = {
  "type": "object",
  "properties": {
    "designation": {
      "title": "Designation",
      "type": "string", // Use data type "string" here, not "select"
      "default": "" // Set empty string as default instead of undefined
    },
    // ... other properties
  },
  "required": ["designation", "agreeTerms"]
};

Updated Form Configuration for designation #

Change the first titleMap entry to use an empty string as the value—this ensures the "Select a designation" option is recognized as an unselected state that triggers required validation:

{
  "key": "designation",
  "type": "select", // UI component type stays here
  "title": "Designation",
  "titleMap": [
    { value: "", name: "Select a designation" }, // Empty string instead of undefined
    { value: "Andersson", name: "Andersson" },
    { value: "Johansson", name: "Johansson" },
    { value: "other", name: "Something else..."}
  ]
}

Why this works: Angular Schema Form’s required validation for string fields checks if the value is non-empty. Using undefined as the default/option value can sometimes be interpreted as the field not being set at all, which skips the required check. An empty string is a clear "unselected" value that triggers the validation.

2. Fixing the Checkbox Field (agreeTerms) #

For checkboxes, the required validation in Angular Schema Form expects the value to be true (since checkboxes bind to boolean values). Make sure your schema defines the field as a boolean type, and set a default value of false so unchecking it fails the required check:

Updated Schema for agreeTerms #

$scope.schema = {
  // ... other properties
  "agreeTerms": {
    "title": "I agree to ...",
    "type": "boolean",
    "default": false // Set default to false so unchecking triggers validation
  }
};

Your existing form configuration for the checkbox is fine—no changes needed there. The required flag in the schema will now enforce that the user must check the box (value is true) to submit.

Why Your Previous Attempts Didn’t Work #

• Setting the select’s first value to '' or null but keeping the schema type as select was invalid (schema types are data types, not UI types).
• Changing the select’s schema type to object broke the model binding because the select returns a string value, which doesn’t match an object type.

Final Check #

Make sure you’re triggering form validation correctly when submitting. If you’re handling submission manually, broadcast the validation event first:

$scope.submitForm = function() {
  $scope.$broadcast('schemaFormValidate');
  if ($scope.myForm.$valid) {
    // Process submission
  }
};

That should get both fields to show the required validation messages when they’re not filled out correctly!

内容的提问来源于stack exchange，提问作者biko