How to make control forcefully non mandatory in submit button

Question

I have a textbox A and two button B & C in a form.
If I dont fill anything in Textbox A

• When I press Button B then it should say required.
• When I press Button C then it should not say required.

HTML FILE

<form name="nm_eventform" novalidate> 
 <input type="text" ng-model="md_eventname" name="nm_evtname" required />
   <div ng-messages="nm_eventform.nm_evtname.$error" role="alert">
     <div ng-message="required" class="divMasterMsg">Event Name is required</div>
   </div> 
 <button type="submit">B</button>
 <button type="submit" ng-click="ButtonC()">C</button>
</form>

As I made required so I dont need to write anything in ButtonB(). As I want to suppress Mandatory condition in ButtonC(), so I use $setValidity but it is not making my form valid.

JS File

$scope.ButtonC= function () {        
        $scope.nm_eventform.nm_evtname.$setValidity('required', false);        
        if ($scope.nm_eventform.$valid) {    
        }
}

I had tried ng-required but it does not suit my case.

Answer 1

You need to use ng-required instead of required like ng-required="{{editing == false ? true : false}}" and change true or false value according your button click event.

    <form name="nm_eventform" novalidate> 
     <input type="text" ng-model="md_eventname" name="nm_evtname" ng-required="{{editing == false ? true : false}}" />
       <div ng-messages="nm_eventform.nm_evtname.$error" role="alert">
         <div ng-message="required" class="divMasterMsg">Event Name is required</div>
       </div> 
     <button type="submit">B</button>
     <button type="submit" ng-click="ButtonC()">C</button>
    </form>

**For Js File:**

$scope.ButtonC= function () {        
        $scope.editing  = true;
}