To ensure that the user fills in at least one field, you can utilize ng-required and check the length attribute of the string.

For example, you can implement the following:

<form name="myForm">
            <input type="text" ng-model="fields.one" name="firstField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
            <br/>
            <input type="text" name="secondField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" ng-model="fields.two" />
            <br/>
            <input type="text" ng-model="fields.three" name="thirdField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
            <br/>
            <button type="submit" ng-disabled="!myForm.$valid">Submit</button>
</form>

Check out this live fiddle example for a better understanding.

For more insights on the difference between required and ng-required, refer to this question.

There are various strategies available, and the most suitable one depends on your specific needs.

One approach that stands out for its versatility and adaptability is as follows:
By "versatile", it means it can be applied not just to text fields but also to other types of inputs like checkboxes.
It's considered "flexible" due to its ability to accommodate any number of control groups where at least one control in each group must have a value. Moreover, there are no spatial restrictions - the controls in each group can be placed anywhere within the DOM (if necessary, they can be confined within a single form).

This particular method involves creating a custom directive (requiredAny) similar to ngRequired, but tailored to consider the other controls within the same group. Once defined, the directive can be utilized in this manner:

<form name="myForm" ...>
  <input name="inp1" ng-model="..." required-any="group1" />
  <input name="inp2" ng-model="..." required-any="group1" />
  <input name="inp3" ng-model="..." required-any="group1" />

  <input name="inp4" ng-model="..." required-any="group2" />
  <input name="inp5" ng-model="..." required-any="group2" />
</form>

_{In the above example, at least one of [inp1, inp2, inp3] must have a value since they belong to group1.
Similarly, for [inp4, inp5] belonging to group2.}

---

The structure of the directive is outlined below:

app.directive('requiredAny', function () {
  // Map for keeping track of each group's status.
  var groups = {};

  // Utility function: Determines if at least one control
  // within the group has a value.
  function determineIfRequired(groupName) {
    var group = groups[groupName];
    if (!group) return false;

    var keys = Object.keys(group);
    return keys.every(function (key) {
      return (key === 'isRequired') || !group[key];
    });
  }

  return {
    restrict: 'A',
    require: '?ngModel',
    scope: {},   // An isolated scope is used for convenience
                 // in $watching and cleanup tasks (on destruction).
    link: function postLink(scope, elem, attrs, modelCtrl) {
      // If `ngModel` is not present or no group name is specified,
      // further actions cannot be taken.
      if (!modelCtrl || !attrs.requiredAny) return;

      // Access the group's status object.
      // Initialize if not yet created.
      var groupName = attrs.requiredAny;
      if (groups[groupName] === undefined) {
        groups[groupName] = {isRequired: true};
      }

      var group = scope.group = groups[groupName];

      // Cleanup logic when the element is removed.
      scope.$on('$destroy', function () {
        delete(group[scope.$id]);
        if (Object.keys(group).length <= 1) {
          delete(groups[groupName]);
        }
      });

      // Update validity based on the group's status.
      function updateValidity() {
        if (group.isRequired) {
          modelCtrl.$setValidity('required', false);
        } else {
          modelCtrl.$setValidity('required', true);
        }
      }

      // Update group state and control validity.
      function validate(value) {
        group[scope.$id] = !modelCtrl.$isEmpty(value);
        group.isRequired = determineIfRequired(groupName);
        updateValidity();
        return group.isRequired ? undefined : value;
      }

      // Re-validation whenever value changes
      // or group's `isRequired` property alters.
      modelCtrl.$formatters.push(validate);
      modelCtrl.$parsers.unshift(validate);
      scope.$watch('group.isRequired', updateValidity);
    }
  };
});

_{Although lengthy, once integrated with a module, it becomes simple to incorporate into your forms.}

---

For a demonstration, check out this (not so) brief demo.

Never underestimate the power of saving time, even if it seems too late:

When dealing with just two fields and needing to make one of them required:

<input type="text" 
      ng-model="fields.one" 
      ng-required="!fields.two" />
<br/>
<input type="text" 
      ng-model="fields.two"
      ng-required="!fields.one"  />

If there are three fields as mentioned:

<input type="text" 
      ng-model="fields.one" 
      ng-required="!(fields.two || fields.three)" />
<br/>
<input type="text" 
      ng-model="fields.two"
      ng-required="!(fields.one || fields.three)"  />
<br/>
<input type="text" 
      ng-model="fields.three" 
      ng-required="!(fields.one|| fields.two)" />

For more fields than this, consider creating a function on the scope and monitoring it.

Check out the interactive example here

Adjustment made to the response provided by ExpertSystem () in order to ensure compatibility with the latest version of angularjs.

I have updated the updateValidity() function to include a parameter for setting parse to true or false.

function updateValidity() {
            if (group.isRequired) {
                modelCtrl.$setValidity('required', false);
                modelCtrl.$setValidity('parse', false); 
            } else {
                modelCtrl.$setValidity('required', true);
                modelCtrl.$setValidity('parse', true);
            }
        }

These modifications have resolved any compatibility issues and the code is now functioning as intended.

Encountered a similar issue just last week; while ExpertSystem's solution provided a good foundation, I was seeking some additional enhancements:

• Utilize Angular 1.4.3
• Incorporate ngMessages

After some exploration, I ended up with this particular example on JSFiddle - hoping it serves as inspiration for others facing the same challenge! The relevant JavaScript code snippet from the Fiddle is as follows:

var app = angular.module('myApp', ['ngMessages']);
app.controller('myCtrl', function ($scope) {
    $scope.sendMessage = function () {
        $scope.myForm.$submitted = true;

        if ($scope.myForm.$valid) {
            alert('Message sent !');
        }
    };
});

app.directive('requiredAny', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function postLink(scope, elem, attrs, ctrl) {
            // Custom directive logic here
        }
    };
});

Here is a modified version of ExpertSystems' insightful post. I decided to remove the destroy method as it wasn't necessary.

In addition, I included a faded explanation that may assist you in your coding endeavors. This directive is now used for all my mandatory fields. When utilizing this directive, I no longer rely on ng-required or required.

To make a field mandatory, simply provide a unique group name. If you don't want the field to be obligatory, pass null. For multiple groups, use matching group names.

I believe there are further refinements that could be made here. While AngularJS suggests using the $validators pipeline instead of $setValidity, I struggled to make it work. I'm still grappling with this intricate concept. If you have more insights, please share!

app.directive('rsPartiallyRequired', function () {

 var allinputGroups = {};

 return {
   restrict: 'A',
   require: '?ngModel',
   scope: { },

   link: function(scope, elem, attrs, ctrl) {
     if( !ctrl || !attrs.rsPartiallyRequired ){ return } // Exit if no ngModel or rsPartialRequired is null.

    // Initialize upon loading
    ctrl.$formatters.push( validateInputGroup ); // From model to view.
    ctrl.$parsers.unshift( validateInputGroup ); // From view to model.

    if ( ! allinputGroups.hasOwnProperty( attrs.rsPartiallyRequired )){ // Create key only once and do not overwrite it.
    allinputGroups[ attrs.rsPartiallyRequired ] = { isRequired: true } // Set new group name value to { isRequired: true }.
  }

    scope.inputGroup = allinputGroups[ attrs.rsPartiallyRequired ] // Pass { isRequired: true } to form scope.

    function validateInputGroup(value) {
    scope.inputGroup[ scope.$id ] = !ctrl.$isEmpty( value ); // Add to inputGroup ex: { isRequired: true, 01E: false }.
    scope.inputGroup.isRequired = setRequired( attrs.rsPartiallyRequired ); // Set to true or false.
    updateValidity(); // Update all needed inputs based on new user input.
    return scope.inputGroup.isRequired ? undefined : value
  }

    function setRequired(groupName) {
      if( ! allinputGroups[ groupName ] ){ return false } // No group name then set required to false.
      return Object.keys( allinputGroups[ groupName ] ).every( function( key ) { // Key is 'isRequired' or input identifier.
      return ( key === 'isRequired' ) || ! allinputGroups[ groupName ][ key ]
    });
  }

    scope.$watch('scope.inputGroup.isRequired', updateValidity); // Watch changes to inputGroup and update as needed.

    function updateValidity() { // Update input state validity when called.
      ctrl.$setValidity('required', scope.inputGroup.isRequired ? false : true );
    } 
  }
 }
});

// This directive sets input required fields for groups or individual inputs.  If an object in the template is given
// to the directive like this: 
// Object: { "name": "account_number", "attrs": { "required": { "group": "two"  }}}.
// HTML: <input type="text" rs-partially-required="{{ field.attrs.required.group }}" />
// Or anything where the evaluation is a string, for example we could use "groupOne" like this...
// HTML: <input type="text" rs-partially-required="groupOne" />
// Then this directive will set that group to required, even if it's the only member of group.  
// If you don't want the field to be required, simply give the directive a null value, like this...
// HTML: <input type="text" rs-partially-required="null" />
// However, when you want to use this directive say in an ngRepeat, then just give it a dynamic string for each input
// and link the inputs together by giving the exact matching string to each group that needs at least one field. ex:

// <input type="text" rs-partially-required="null" />
// <input type="text" rs-partially-required="one" />
// <input type="text" rs-partially-required="two" />
// <input type="text" rs-partially-required="one" />
// <input type="text" rs-partially-required="null" />
// <input type="text" rs-partially-required="three" />
// <input type="text" rs-partially-required="three" />
// <input type="text" rs-partially-required="three" />

// In the above example, the first and fifth input are not required and can be submitted blank.
// The input with group "two" is the only one in the group, so just that input will be required by itself.
// The 2 inputs with "one" will be grouped together and one or the other will require an input before
// the form is valid.  The same will be applied with group "three".
// For this form to be valid, group "two" will be required, and 1 input from group one will be required,  
// and 1 input from group three will be required before this form can be valid.

If you want to ensure that each input field is required, you can simply add the 'required' attribute to each one. Then, you can base your validation on whether all fields are filled out correctly or just one of them.

        <form name="form" novalidate ng-submit="submit()">
        // The 'novalidate' attribute disables the browser's validation mechanism

          <input type="text" required ng-model="texts.text1"> 
          <input type="text" required ng-model="texts.text2"> 
          <input type="text" required ng-model="texts.text3"> 
          
          // One way to handle validation is by disabling the submit button until all textboxes are filled correctly:
          <button type="submit" ng-disabled="form.text1.$invalid && form.text2.$invalid && form.text3.$invalid"></button>

        </form>

This setup will enable the button only if at least one field is filled out.

You can choose how to indicate that the form is invalid, but typically disabling the submit button is a common approach.

In a previous project, I encountered a similar requirement for grouping and came up with this solution. Feel free to use it if you find it helpful.

.directive('group',function(){
        return {
            require: '^form',
            link : function($scope,element,attrs,formCtrl){
                var ctrls =[];

                element.find(".group-member").each(function(){
                    var member = angular.element($(this));
                    var mdlCtrl = member.data("$ngModelController");
                    if(!mdlCtrl){
                        throw "Group member should have ng-model";
                    }
                    ctrls.push(mdlCtrl);
                });

                var errKey = attrs['name']+"GrpReqd";
                var min = attrs['minRequired'] || 1;
                var max = attrs['maxRequired'] || ctrls.length;

                $scope.validateGroup = function(){
                    var defined=0;
                    for(i=0;i<ctrls.length;i++){
                        if(ctrls[i].$modelValue){
                            defined++;
                        }
                    }
                    if(defined < min || defined > max){
                        formCtrl.$setValidity(errKey,false);
                    } else {
                        formCtrl.$setValidity(errKey,true);
                    }
                };

                //support real time validation
                angular.forEach(ctrls,function(mdlCtrl){
                    $scope.$watch(function () {
                          return mdlCtrl.$modelValue;
                       }, $scope.validateGroup);
                });

            }
        };
    })

Usage in HTML :

<div name="CancellationInfo" group min-required="1" max-required="1">
            <input type="text" class="form-control group-member" style="width:100%;" name="Field1" ng-model="data.myField"  />
            <input type="text" class="form-control group-member" style="width:100%;" name="Field1" ng-model="data.myField2"  />
            <input type="text" class="form-control group-member" style="width:100%;" name="Field2" ng-model="data.myField3"  />
        </div>

The group directive is used to define logical groupings. It should be placed on an element without an ng-model attribute, like a div in the example above. The directive accepts two optional attributes, min-required and max-required. Individual fields within the group are identified by the group-member class and must have an ng-model for binding. If the group directive does not contain an ng-model, errors will be displayed under

yourForm.$error.CancellationInfoGrpReqd

in the given case. A unique error key is generated using the element's name where the group directive is applied, followed by GrpReqd.