我有三个输入字段:
首先加载页面时会显示所有三个字段,但当我选择 value1 时,应显示地址字段并隐藏电话号码。同样,当点击 value2 时,会显示电话号码并隐藏地址。
<div class="form-group col-md-3">
<label for="age">Address</label>
<input type="text"
id="address"
class="form-control"
name="address"
placeholder="Enter the address"
[(ngModel)]="selection.address"
#address="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && selectionDate.invalid }"
required
/>
<div *ngIf="f.submitted && address.invalid" class="invalid-input">
<!-- individual validation errors -->
<div *ngIf="address.errors?.required">Address is required</div>
</div>
</div>
<div class="form-group col-md-3">
<label for="age">Phone Number</label>
<input type="text"
id="phoneNumber"
class="form-control"
name="phoneNumber"
placeholder="Enter the Phone number"
[(ngModel)]="selection.phoneNumber"
#phoneNumber="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && phoneNumber.invalid }"
required />
<div *ngIf="f.submitted && phoneNumber.invalid" class="invalid-input">
<!-- individual validation errors -->
<div *ngIf="phoneNumber.errors?.required">Phone Number is required</div>
</div>
</div>
</div>
<!--row 3-->
<div class="col-md-12">
<div class="form-group col-md-3">
<label for="selectionType">Selection Type</label>
<select class="form-control" id="selectionType"
[(ngModel)]="selection.selectionType" name="selectionType" required #selectionType="ngModel" [ngClass]="{ 'is-invalid': f.submitted && selectionType.invalid }">
<option value="value1">Value1</option>
<option value="value2">Value2</option>
</select>
<div *ngIf="f.submitted && selectionType.invalid" class="invalid-input">
<!-- individual validation errors -->
<div *ngIf="selectionType.errors?.required">Selection Type is required</div>
</div>
</div>
在上面的原始代码中,我尝试进行以下更改:
<option value="value1" (click)="callme()">Value1</option>
这在 selection.component.ts 文件中。我还尝试打印到控制台并尝试输出我的逻辑,但我没有看到任何变化。
callme(){
console.log("call me");
}
我怎样才能做到这一点?有没有新的方法可以做到?
最佳答案
使用更改事件绑定(bind)和 boolena 来跟踪更改:
引用: https://stackblitz.com/edit/angular-qihhhh?file=src%2Fapp%2Fapp.component.html
app.component.html
<form action="javascript:;">
<div class="form-group" *ngIf="isNameSelected">
<label for="name">name :</label>
<input type="text" class="form-control" id="name">
</div>
<br>
<div class="form-group" *ngIf="!isNameSelected">
<label for="address">address:</label>
<input type="text" class="form-control" id="address">
</div>
<br/>
<select (change)="selectInput($event)">
<option value="Value-1">Value-1</option>
<option value="Value-2">Value-2</option>
</select>
</form>
应用程序组件.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isNameSelected: boolean;
selectInput(event) {
let selected = event.target.value;
if (selected == "Value-1") {
this.isNameSelected = true;
} else {
this.isNameSelected = false;
}
}
}
关于javascript - 如何根据 Angular 选择值隐藏输入字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53099372/