generating errors

Question

I have the following code snippets

.html

  <input type = "number"
         min = "0"
         max = "120"
         #yearsCtrl = "ngForm"
         [ngFormControl] = "ageForm.controls['yearsCtrl']"
         [(ngModel)] = "age.years"
         id = "years">

.dart

class Age
{
  int years = 0;
}

class AgeComponent {
....
  AgeComponent( FormBuilder fb, ModelService
  ageSrvc) {
    ageForm = fb.group( {
      'yearsCtrl': [''],
    } );
    _yearsCtrl = ageForm.controls['yearsCtrl'];

    age = new Age()
  }

...

}

My attempts to run the application gives the following errors (partial)

>EXCEPTION: type 'String' is not a subtype of type 'num' of 'value'. in [AST]
  EXCEPTION: type 'String' is not a subtype of type 'num' of 'value'. in [AST]
    (anonymous function)    
  ORIGINAL EXCEPTION: type 'String' is not a subtype of type 'num' of 'value'.
    (anonymous function)    
  ORIGINAL STACKTRACE:
    (anonymous function)    
  #0      NumberValueAccessor.writeValue (package:angular2/src/common/forms/directives/number_value_accessor.dart:38:23)
#1      setUpControl (package:angular2/src/common/forms/directives/shared.dart:34:21)
#2      NgFormControl.ngOnChanges (package:angular2/src/common/forms/directives/ng_form_control.dart:111:7)
...

It seems as if the type="num" is not being handled. I suspect the age int might be an issue also, in that it is an int but a string is required. The reverse conversion from sting back to int might also be an issue.

Any help is appreciated.

Thanks

Answer 1

The field needs to be of type String. Angular doesn't convert the value.

Similar to Polymer dart: Data bind integer value to String attribute

See also

• How do I parse a string into a number with Dart?

• Is there a better way to parse an int in Dart

A custom value accessor might help. See this Plunker for an example.
The component Address implements ControlValueAccessor with writeValue(v), registerOnChange(fn), registerOnTouched(fn)