Validate User Input Using Streams in Dart

index.html

<form>
<h4>Guess the Word<h4>
  <input/>
  <button>Guess</button>
  <div id="error" ></div>
</form>

style.css

h4 {
  color: white;
}
form{
  display: flex;
  flex-direction: column;
}
#error {
  color: red;
}

validate.dart

import 'dart:html';
import 'dart:async';

void main() {
  final InputElement input = querySelector("input") as InputElement;
  final DivElement div = querySelector('#error') as DivElement;

  /// Create Stream Transformer Object
  final validateEmail =
      StreamTransformer.fromHandlers(handleData: (inputValue, sink) {
    if (inputValue.toString().contains('@')) {
      sink.add(inputValue);
    } else {
      sink.addError('Enter a valid email address');
    }
  });
  
  final validateDomain =
      StreamTransformer.fromHandlers(handleData: (inputValue, sink) {
    if (inputValue.toString().contains('.com')) {
      sink.add(inputValue);
    } else {
      sink.addError('Enter a valid email address');
    }
  });

  /// Dynamically Print User Input
  input.onInput
      .map((dynamic event) => event.target.value)
      .transform(validateEmail)
      .transform(validateDomain)
      .listen((inputValue) => div.innerHtml = '',
          onError: (err) => div.innerHtml = err);
}