从 Dart WebComponent 中的表单获取数据答案

【问题标题】：Getting data from form in Dart WebComponent从 Dart WebComponent 中的表单获取数据
【发布时间】：2012-11-29 21:19:56
【问题描述】：

我正在尝试从 Dart webComponent 中的表单获取数据。定义了以下 LoginComponent。单击提交按钮时不会调用 doLogin 函数。尝试在提交按钮上放置点击处理程序，但这也不起作用。

<html><body>
<element name="x-login" constructor="LoginComponent" extends="div">
<template >
    <form id='loginForm' on-submit='doLogin()'>
        <div>
            <h1>Login :</h1>
            <label for="loginName">Login name</label>
            <input type="text" required="required" data-bind="value:loginId" />
            <label>Password</label>
            <input type="password" required="required" data-bind="value:pwd" />
            <input type='submit' value="Login" />
            <input type='button' data-action="click:doCancel" value="Cancel" />               
            <span>{{errorMessage}}</span></div>
        </div>
    </form>      
</template>

<script type="application/dart">
  import 'package:web_components/web_components.dart';      
  import 'ouremr.dart';  
  import 'dart:html';

  class LoginComponent extends WebComponent {
  String errorMessage=""; 
  String loginId='';
  String pwd='';                     
  }                               

    void doLogin(e) {
    print("in do login");
      e.preventDefault();          
      print(loginId);
      print(pwd);

      }  

    void doCancel(e) {
    e.preventDefault();
      errorMessage=' ';         
      style.display='none';
    }                       
  }           
</script>
</element>
</body></html>

提交表单时不会调用doLogin 函数。尝试了以下但也不起作用：

<input type='submit' value="Login" on-click='onLogin()'/>

【问题讨论】：

您使用的是什么版本的 dart_web_components？我看到您正在使用旧版本中不可用的 on-submit="doLogin()" 。也许你可以添加你的 pubspec.lock 让我们看看？

标签： forms dart web-component

【解决方案1】：

感谢您的提问！很高兴看到你在玩 Dart 的 Web UI 库。

我清理了您的代码，并进行了一些调整，它可以工作了！

将 doLogin 等处理程序放入 LoginComponent 类中
您的模板中有一个额外的</div>
将$event 添加到您的点击表达式中

代码见这里：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>login_page</title>
    <link rel="components" href="login_form.html">
  </head>
  <body>
    <h1>login_page</h1>

    <x-login></x-login>

    <script type="application/dart">main() {}</script>
    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

和

<!DOCTYPE html>
<html><body>
<element name="x-login" constructor="LoginComponent" extends="div">
<template >
    <form id='loginForm' on-submit='doLogin($event)'>
        <div>
            <h1>Login :</h1>
            <label for="loginName">Login name</label>
            <input type="text" required="required" data-bind="value:loginId" />
            <label>Password</label>
            <input type="password" required="required" data-bind="value:pwd" />
            <input type='submit' value="Login" />
            <input type='button' on-click="doCancel($event)" value="Cancel" />               
            <span>{{errorMessage}}</span>
        </div>
    </form>      
</template>

<script type="application/dart">
  import 'package:web_components/web_components.dart'; 
  import 'dart:html';

  class LoginComponent extends WebComponent {
   String errorMessage=""; 
   String loginId='';
   String pwd=''; 

    void doLogin(Event e) {
      print("in do login");
      e.preventDefault();          
      print(loginId);
      print(pwd);
    }  

    void doCancel(Event e) {
      e.preventDefault();
      errorMessage=' ';         
      style.display='none';
    }                       
  }          
</script>
</element>
</body></html>

希望有帮助！

（注意，上面的代码适用于 0.2.7 版本的 dart_web_components）

【讨论】：

太棒了！感谢您的帮助！