问题：当我在显示和隐藏密码之间切换时，输入的formControlName'密码'值没有反映。
流程：
我的观点部分：
<ion-input formControlName="password" placeholder="Password*" type="password" (ngModelChange)="onChange($event)"
autocomplete="off" [hidden]="showPasswordModel"></ion-input>
<ion-input formControlName="password" placeholder="Password-" type="text" (ngModelChange)="onChange($event)"
autocomplete="off" [hidden]="!showPasswordModel"></ion-input>
<ion-item class="checkbox-container">
<ion-label>Show password</ion-label>
<ion-toggle (click)="showPasswordModel = !showPasswordModel"></ion-toggle>
</ion-item>
ts部分
constructor(private _formBuilder:FormBuilder) {
this.loginForm = this._formBuilder.group({
password: ['', Validators.compose([Validators.required])]
});
--
}
提示：http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
提前致谢
答案 0 :(得分：6)
在这里，您可以看到在元素
上使用type = Password HTML5输入要在HTML中播放的字段和按钮以及用于识别它的#input
<ion-input #input formControlName="password" type="password"></ion-input>
<button class="btn" type="button" (click)="showPassword(input)"> Show Password </button>
.ts文件功能将是这样的
showPassword(input: any): any {
input.type = input.type === 'password' ? 'text' : 'password';
}
答案 1 :(得分：0)
我知道这被标记为正确，但我通过在输入旁边保留一个切换图标找到了一种方法。
当输入类型设置为ios-eye-outline时，我有一个图标显示眼睛图标password，当输入类型为ios-eye-off-outline时，我有一个带有直线图标的眼睛text设置为showPassword。
我使用JavaScript来操作输入类型，我还使用JavaScript来获取当前的输入类型，并决定对其进行比较。
*.html布尔值用于隐藏和显示不同的图标。
图标也只会在用户在密码字段中输入内容后显示，并在字段为空时再次隐藏。
在<ion-item>
<ion-label floating color="dark">Password</ion-label>
<ion-input id="password" [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
</ion-input>
<button ion-button clear color="dark" type="button" class="password__btn__toggle" item-right (click)="togglePassword()" *ngIf="!showPassword && login.password"> <ion-icon id="password__icon" name="ios-eye-outline"> </ion-icon> </button>
<button ion-button clear color="dark" type="button" class="password__btn__toggle" item-right (click)="togglePassword()" *ngIf="showPassword && login.password"> <ion-icon id="password__icon" name="ios-eye-off-outline"> </ion-icon> </button>
</ion-item>
<p [hidden]="password.valid || submitted == false" color="danger" padding-left>
Password is required
</p>
*.ts在我的public showPassword: boolean = false;
public togglePassword(input:any): void {
let currentType:string = document.getElementById('password').querySelector('.text-input').getAttribute('type');
if (currentType === 'password') {
this.showPassword = true;
document.getElementById('password').querySelector('.text-input').setAttribute('type', 'text');
} else {
this.showPassword = false;
document.getElementById('password').querySelector('.text-input').setAttribute('type', 'password');
}
}
<?php
/*
Test data (tree) (0 is fictional) :
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*/
$tests = [
['in'=>[1], 'out' => [2,4,5]],
['in'=>[1,2], 'out' => [2]],
['in'=>[1,3], 'out' => [4]],
['in'=>[1,2,3], 'out' => [2,4]],
['in'=>[1,2,5], 'out' => [2,5]],
['in'=>[3], 'out' => [4]],
['in'=>[4], 'out' => [4]],
['in'=>[1,6], 'out' => [2,4,5,8,9]],
['in'=>[11], 'out' => [13,14]],
['in'=>[10], 'out' => [13,14]],
['in'=>[1,6,13], 'out' => [2,4,5,8,9,13]],
['in'=>[8,12,6], 'out' => [8,13,14]],
['in'=>[5], 'out' => [5]],
['in'=>[0], 'out' => []],
['in'=>[15], 'out' => [15]],
['in'=>[16], 'out' => [17]],
['in'=>[15,16], 'out' => [15,17]],
['in'=>[999], 'out' => []],
];
foreach($tests as $t) {
echo 'input: ' . implode(',',$t['in']) .' '.PHP_EOL;
$r = f($t['in']);
echo 'output: ' . implode(',',$r) .' ';
if($r == $t['out']) {
echo '(ok)';
}
else {
echo '(TEST FAIL)'.PHP_EOL;
echo 'got: ' . implode(',',$r) .' '.PHP_EOL;
echo 'expected: ' . implode(',',$t['out']) .' ';
}
echo PHP_EOL.PHP_EOL;
}
function f($ids) {
$nodes = getEndNodes($ids, getTree());
return array_map(function($a){return $a['id'];},$nodes);
}
function getEndNodes(array $ids, $tree=false, $force=false, $skip=false) {
if(!$ids) throw new Exception("No ids given");
if(!$tree) throw new Exception("No tree given");
$end_nodes = array();
foreach($tree as $el) {
if(!empty($el['children'])) {
// If given ids is in some of these children, search only those to skip their siblings.
$children = array();
foreach($el['children'] as $child) {
if(in_array($child['element']['id'], $ids)) { $children[] = $child; }
}
if(!empty($children)) {
$end_nodes = array_merge($end_nodes, getEndNodes($ids, $children));
}
// If the current element is in the input ids, force search down this tree. This will get end nodes in deep branches.
elseif(in_array($el['element']['id'], $ids) || $force === true) {
$end_nodes = array_merge($end_nodes, getEndNodes($ids, $el['children'], true));
}
// If nothing else; continue normal search, but only add input ids, not parents. The force will find them.
else {
$end_nodes = array_merge($end_nodes, getEndNodes($ids, $el['children'], false, true));
}
}
else {
if(!$skip && ($el['element']['parent_id'] != 0)) {
$end_nodes[] = $el['element'];
}
elseif (in_array($el['element']['id'], $ids) && $el['element']['parent_id'] == 0) {
$end_nodes[] = $el['element'];
}
}
}
return $end_nodes;
}
function getList() {
return [
['id'=>1,'parent_id'=>0],
['id'=>2,'parent_id'=>1],
['id'=>3,'parent_id'=>1],
['id'=>4,'parent_id'=>3],
['id'=>5,'parent_id'=>1],
['id'=>6,'parent_id'=>0],
['id'=>7,'parent_id'=>6],
['id'=>8,'parent_id'=>7],
['id'=>9,'parent_id'=>7],
['id'=>10,'parent_id'=>0],
['id'=>11,'parent_id'=>10],
['id'=>12,'parent_id'=>11],
['id'=>13,'parent_id'=>12],
['id'=>14,'parent_id'=>12],
['id'=>15,'parent_id'=>0],
['id'=>16,'parent_id'=>0],
['id'=>17,'parent_id'=>16],
];
}
function getTree() {
$hash = array();
$list = getList();
foreach($list as $el) {
$hash[$el['id']] = array('element' => $el);
}
foreach($hash as $id => &$node) {
if ($parent_id = $node['element']['parent_id']) {
$hash[$parent_id]['children'][] =& $node;
}
else {
$tree[] =& $node;
}
}
unset($node, $hash);
return $tree;
}