浅析Angular19 自定义表单控件(4)

<div class="panel panel-primary">
 <div class="panel-heading">面板模板</div>
 <div class="panel-body">
 <h3>面板测试内容</h3>
 </div>
 <div class="panel-footer">2018-1-22 10:22:20</div>
</div>

<div class="panel-primary">
 <div class="panel-heading">自定义提取表单控件</div>
 <div class="panel-body">
 <form #myForm=ngForm>
  <app-counter name="counter" [(ngModel)]="countNumber">
  </app-counter>
 </form>
 <h6>绿线上是自定义提取的表单控件显示的内容</h6>
 <hr style="border: solid green 2px" />
 <h6>绿线下是使用自定义表单控件时表单的实时数据</h6>
 <h3>表单控件的值为：{{myForm.value | json}}</h3>
 </div>
 <div class="panel-footer">2018-1-31 10:09:17</div>
</div>

<div class="panel-primary">
 <div class="panel-heading">提取表单控件</div>
 <div class="panel-body">
 <form #form="ngForm">
  <p>outerCounterValue value: {{outerCounterValue}}</p>
  <app-exe-counter name="counter" [(ngModel)]="outerCounterValue"></app-exe-counter>
  <br />
  <button md-raised-button type="submit">Submit</button>
  <br />
  <div>
  {{form.value | json}}
  </div>
 </form>
 </div>
 <div class="panel-footer">2018-1-27 21:51:45</div>
</div>

<div class="panel panel-primary">
 <div class="panel-heading">ngIf指令测试</div>
 <div class="panel-body">
 <button md-rasied-button (click)="onChangeNgifValue()">改变ngif变量</button>
 <br />
 <div *ngIf="ngif; else ngifTrue" >
  <h4 style="background-color: red; color: white" >ngif变量的值为true</h4>
 </div>
 <ng-template #ngifTrue>
  <h4 style="background-color: black; color: white">ngif变量的值为false</h4>
 </ng-template>
 </div>
 <div class="panel-footer">2018-1-27 16:58:17</div>
</div>

<div class="panel panel-primary">
 <div class="panel-heading">RXJS使用</div>
 <div class="panel-body">
 <h4>测试内容</h4>
 </div>
 <div class="panel-footer">2018-1-23 21:14:49</div>
</div>

<div class="panel panel-primary">
 <div class="panel-heading">自定义验证器</div>
 <div class="panel-body">
 <form (ngSubmit)="onTestLogin()" [formGroup]="loginForm">
  <md-input-container>
  <input mdInput placeholder="请输入登录名" formControlName="username" />
  </md-input-container>
  <br />
  <md-input-container>
  <input mdInput placeholder="请输入密码" formControlName="userpwd" />
  </md-input-container>
  <br />
  <button type="submit" md-raised-button>登陆</button>
 </form>
 </div>
 <div class="panel-footer">2018-1-23 11:06:01</div>
</div>

<div class="panel panel-primary">
 <div class="panel-heading">响应式表单</div>
 <div class="panel-body">
 <form [formGroup]="testForm">
  <md-input-container>
  <input mdInput type="text" placeholder="请输入邮箱" formControlName="email" />
  <span mdSuffix>@163.com</span> 
  </md-input-container>
  <br />
  <md-input-container>
  <input mdInput type="password" placeholder="请输入密码" formControlName="password" />
  </md-input-container>
 </form>
 <hr />
 <div>
  <h2>表单整体信息如下：</h2>
  <h4>表单数据有效性：{{testForm.valid}}</h4>
  <h4>表单数据为：{{testForm.value | json}}</h4>
  <h4>获取单个或多个FormControl：{{testForm.controls['email'] }}</h4>
  <hr />
  <h2>email输入框的信息如下：</h2>
  <h4>有效性：{{testForm.get('email').valid}}</h4>
  <h4>email输入框的错误信息为：{{testForm.get('email').errors | json}}</h4>
  <h4>required验证结果：{{testForm.hasError('required', 'email') | json}}</h4>
  <h4>minLength验证结果：{{ testForm.hasError('minLength', 'email') | json }}</h4>
  <h4>hello:{{ testForm.controls['email'].errors | json }}</h4>
  <hr />
  <h2>password输入框啊的信息如下：</h2>
  <h4>有效性：{{testForm.get('password').valid}}</h4>
  <h4>password输入框的错误信息为：{{testForm.get('password').errors | json }}</h4>
  <h4>required验证结果：{{testForm.hasError('required', 'password') | json}}</h4>
 </div>
 <div>
  <button nd-rasied-button (click)="onTestClick()">获取数据</button>
  <h4>data变量：{{data}}</h4>
 </div>
 </div>
 <div class="panel-footer">2018-1-22 15:58:43</div>
</div>

<div class="panel panel-primary">
 <div class="panel-heading">利用响应式编程实现表单元素双向绑定</div>
 <div class="panel-body">
 <md-input-container>
  <input mdInput placeholder="请输入姓名（响应式双向绑定）：" [formControl]="name"/>
 </md-input-container>
 <div>
  姓名为：{{name.value}}
 </div>
 </div>
 <div class="panel-footer">2018-1-22 11:12:35</div>
</div> -->

<div class="panel panel-primary">
 <div class="panel-heading">模板表单</div>
 <div class="panel-body">
 <md-input-container>
  <input mdInput placeholder="随便输入点内容" #a="ngModel" [(ngModel)]="desc" name="desc" />
  <button type="button" md-icon-button mdSuffix (click)="onTestNgModelClick()">
  <md-icon>done</md-icon>
  </button>
 </md-input-container>
 <div>
  <h3>名为desc的表单控件的值为：{{ a.value }}</h3>
 </div>
 </div>
 <div class="panel-footer">2018-1-22 10:19:31</div>
</div>

<div class="panel panel-primary">
 <div class="panel-heading">md-chekbox的使用</div>
 <div calss="panel-body">
 <div>
  <md-checkbox #testCheckbox color="primary" checked="true">测试</md-checkbox>
 </div>
 <div *ngIf="testCheckbox.checked">
  <h2>测试checkbox被选中啦</h2>
 </div>
 </div>
 <div class="panel-footer">2018-1-18 14:02:20</div>
</div> 

<div class="panel panel-primary">
 <div class="panel-heading">md-tooltip的使用</div>
 <div class="panel-body">
 <span md-tooltip="重庆火锅">鼠标放上去</span>
 </div>
 <div class="panel-footer">2018-1-18 14:26:58</div>
</div>


<div class="panel panel-primary">
 <div class="panel-heading">md-select的使用</div>
 <div class="panel-body">
 <md-select placeholder="请选择目标列表" class="fill-width" style="height: 40px;">
  <md-option *ngFor="let taskList of taskLists" [value]="taskList.name">{{taskList.name}}</md-option>
 </md-select>
 </div>
 <div class="panel-footer">2018-1-18 14:26:58</div>
</div> 

<div class="panel panel-primary">
 <div class="panel-heading">ngNonBindable指令的使用</div>
 <div class="panel-body">
 <h3>描述</h3>
 <p>使用了ngNonBindable的标签，会将该标签里面的元素内容全部都看做时纯文本</p>
 <h3>例子</h3>
 <p>
  <span>{{taskLists | json }}</span>
  <span ngNonBindable>← 这是{{taskLists | json }}渲染的内容</span>
 </p>
 </div>
 <div class="panel-footer">2018-1-19 09:34:26</div>
</div>