<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Ngform</title> <Scripttype= "Text/javascript"src= "Lib/[email protected]"></Script> <Scripttype= "Text/javascript"src= "Lib/angular2.dev.js"></Script> <Scripttype= "Text/javascript"src= "Lib/system.config.js"></Script></Head><Body> <Ez-app></Ez-app> <Scripttype= "module">Import {component,view,bootstrap,ngif} from"angular2/angular2"; //introducing the form instruction setImport {formdirectives} from"angular2/forms"; //Ezapp Components@Component ({selector:"Ez-app"}) @View ({directives:[formdirectives,ngif], Template: '<form #f="form"(Submit)="Search (F.value)"> <Select> <option Value="Web">Web page</option> <option Value="News">News</option> <option Value="Image">Image</option> </select> <input type="text"ng-Control="kw"> <Button Type="Submit">Search</button> </form> <!--give a simple feedback. - <H1*ng-if="kw!= "">searching for {{kw}} ...</h1>', styles:[' form{background: #90a4ae;p adding:5px;} ']}) class ezapp{constructor () { This. KW= ""; } search (val) { This. KW=val.kw; //pretend in search, 2 seconds to returnsetTimeout (()= This. KW="", -); }} bootstrap (Ezapp); </Script></Body></HTML>
AngularJS2.0 A form example--in general, it's simplified. 1.x is more natural to use.