How to create a Dart form - dart

Question

My problem: building a Dart form according to the book. Below, my basic sample that looks like JS. It works fine but I get this warning: The getter value is not defined for the class Element.
My question: how can I write a better Dart code to avoid this warning message? Thanks.
HTML:
<form>
<input type="number" min="0" id="enter-x">
<input type="number" min="0" id="enter-y">
<input type="button" id="result" value="Submit">
<input type="reset" id="raz" value="Reset">
<input type="text" id="s" readonly>
</form>
DART:
import 'dart:html';
import 'dart:core';
main() {
document.querySelector('#result').onClick.listen((e) {
calculateS();
});
}
calculateS() {
var x = int.parse(document.querySelector('#enter-x').value);
var y = int.parse(document.querySelector('#enter-y').value);
var surface = (x * y).toString();
document.querySelector('#s').value = surface;
}

Answer 1

Dart helps with hints and warning to find errors in your program.
The generic Element doesn't have a value field. The Dart program is still valid and should work as expected and doesn't cause any errors or warnings at runtime because the actually returned element is the more specialized TextInputElement or NumberInputElement which has a value field.
To silence the analyzer, make this more clear by adding a "cast"
calculateS() {
var x = int.parse((document.querySelector('#enter-x') as NumberInputElement).value);
var y = int.parse((document.querySelector('#enter-y') as NumberInputElement).value);
var surface = (x * y).toString();
(document.querySelector('#s') as TextInputElement).value = surface;
}
Try it at DartPad
See also:
https://api.dartlang.org/1.12.0/dart-html/InputElement-class.html
Dart 'query' explicit cast
What is the syntax for implicit cast operator in dart?
https://www.dartlang.org/docs/dart-up-and-running/ch02.html#operators