Validators: required <select> marked as ng-invalid for option value "0"

[cghislai]

I have a required select with enum values options :

 export enum Pricing {
  VALUE0,
  VALUE1,
  VALUE2
}


@Component({
  selector: 'home',
  template: `
    Welcome Home
    <form>
     <select id="pricing"
        [ngModel]="pricingModel"
        (change)="onPricingChanged($event)"
        ngControl="pricingControl" required>
        <option *ngFor="#pricing of allPricings"
                [value]="pricing">
            {{ getPricingLabel(pricing) }}
        </option>
    </select>
    {{ pricingModel }}
  `,
  styles: [`
  .ng-invalid { border: 2px solid red; }
  `]
  viewProviders: [FORM_DIRECTIVES]
})
export class Home {

  pricingModel: Pricing;

  allPricings: Pricing[] = [
    Pricing.VALUE0,
    Pricing.VALUE1,
    Pricing.VALUE2
    ];
    constructor() {
      this.pricingModel = Pricing.VALUE0;
    }

    onPricingChanged(event) {
      var value:string = event.target.value;
      var pricing:Pricing = <Pricing>parseInt(value);
      this.pricingModel = pricing;
    }

    getPricingLabel(pricing: Pricing) {
      return Pricing[pricing];
    }
}

Using this code, the control is marked as invalid when selecting the first value.
plunker: http://plnkr.co/edit/ABh8pzp1afXkINcunKR8?p=preview

[mhevery]

The issue is that 0 is falsy which fails the required check.

[fredgate]

That does not solve the issue when required valiator is applied to an input of type number, and the entered text is empty : the value is then NaN.
See : #6932

[danielfigueiredo]

@fredgate I'm not sure how #6932 should be resolved
NumberValueAccessor tries to parseFloat an empty string resulting in NaN, which required validator also doesn't understand. Should required validator throw invalid when NaN is sent? I put a reference to a commit from my fork in the issue.
It looks for me that the problem should be solved in numberValueAccessor, because they're the bridge between a DOM element and a Control. Thus it should know that if a user deletes the content and the value is empty string, the input is empty and not NaN.
I don't have much knowledge on this so I can be wrong :)

[awerlang]

Either start you enum with 1 or do not call parseInt().

 export enum Pricing {
  VALUE0 = 1,
  VALUE1,
  VALUE2
}

[fredgate]

No.
A ValueAccessor assures the mapping between the text in the input field (in the DOM) and the value of the angular control. NumberValueAccessor is a specific ValueAccessor ensuring that the control value will be a number. It is normal that is call parseInt. And it should support 0 which is a number like others.
NumberValueAccessor must always set the value of a control to a number and never to a string. NaN is a special number but it is a number. The exception could be for the empty string : may be that NumberValueAccessor should in this case produce a special value like null or undefined. This could solve all the issues with validators.
The discussion is open. See #6932

[ericmartinezr]

This issue can be closed, the fix landed with beta.6

[kara]

Closing (fixed by #6617)