ngOfficeUIFabric / ng-officeuifabric

Office UI Fabric (https://github.com/OfficeDev/office-ui-fabric) implementation for Angular
http://ngOfficeUiFabric.com
MIT License
321 stars 67 forks source link

uif-choicefield-option not selected after load #462

Closed marbetschar closed 7 years ago

marbetschar commented 7 years ago

I've added a uif-choicefield-group with multiple uif-choicefield-option's on my page as follows:

<uif-choicefield-group ng-model="form.doccacc">
    <uif-choicefield-group-title><label class="ms-Label">Kundenzugriff</label></uif-choicefield-group-title>

    <uif-choicefield-option uif-type="radio" value="true">Ja</uif-choicefield-option>
    <uif-choicefield-option uif-type="radio" value="false">Nein</uif-choicefield-option>
</uif-choicefield-group>

and this is how the corresponding controller looks like:

.controller('appController',function($scope){
    $scope.form = {
        doccacc: false
    };
})

Expected Behavior

After page load, the corresponding uif-choicefield-option should be preselected: expected

Actual Behavior

None of the uif-choicefield-option's are selected: actual

ericivarsson commented 7 years ago

Hi @marbetschar,

Looks like the ui-choicefield-group expects a string value for the ng-model binding. When setting the value to doccacc: "false" the correct option is selected on init:

$scope.form = {
      doccacc: 'false'
};

I´m not sure if this is the expected behavior or a bug and I haven´t looked deeper into creating a fix but from having a quick look at the current source I do believe it could support Boolean values with a few small changes to the setViewValue and getViewValue functions.

andrewconnell commented 7 years ago

Not sure it's a bug, but if that is the case @ericivarsson then we should check if the value passed in is a valid boolean value and respect it, not requiring a text value. IMHO it should expect a boolean, not a string. Need to investigate further...

ericivarsson commented 7 years ago

The docs at https://docs.angularjs.org/api/ng/input/input%5Bradio%5D states that value only supports string values and that you should use ng-value instead for non-string values like boolean in this case.

I´ve verified that this component works as expected when using ng-value for the uif-choicefield-option elements.

What do you think @andrewconnell, not a bug then right? Perhaps update the demo-page with this information?

@marbetschar using ng-value like this should solve your problem: `

Ja Nein`
andrewconnell commented 7 years ago

Agreed... good catch @ericivarsson

marbetschar commented 7 years ago

@ericivarsson this indeed solved my problem! Thank you both very much for this hint!! Updating the demo page would be fantastic!