Question

我有三个输入字段：

首先加载页面时会显示所有三个字段，但是当我选择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");
}

我该如何实现？有新的方法吗？

Answer 1

您应将事件添加到选择标签上

<select (change)="callme($event)"></select>

然后您可以在组件中创建如下方法

callme(event): void {
    const selectedValue = event.target.value;
    console.log(selectedValue);
}

您还需要在外部div上添加一个条件* ngIf，以同时显示地址和电话号码

我在这里为您创建了一个示例：https://stackblitz.com/edit/angular-rpxt4o?embed=1&file=src/app/app.component.ts

Answer 2

使用更改evet绑定和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>

app.component.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;
    }
  }
}

Answer 3

在delete taggable,tags from taggable left join tags on taggable.tag_id= tags.id where tags.id = "which id you want to delete";标记内使用select，以便在每次更改所选选项时触发。

(change)="callme()"

使用此模板变量隐藏/显示每个字段：

<select #sel (change)="callme($event, sel.value)">

</select>

修改代码以符合您的确切需求。

Answer 4

组件：

@ViewChild('address', {read: ElementRef}) address: ElementRef;
@ViewChild('phoneNumber', {read: ElementRef}) phoneno: ElementRef;

callme(event): void {
    const selectedValue = event.target.value;
    if(selectedValue === 'value1'){
      this.address.nativeElement.style.display = 'none';
      this.phoneno.nativeElement.style.display = 'block';

    else if(selectedValue === 'value2'){
      this.phoneno.nativeElement.style.display = 'none';
      this.address.nativeElement.style.display = 'block';

    }
}

Answer 5

在我的情况下，我需要隐藏多个表单字段取决于多种类型，所以我所做的是，

创建包含所有表单字段的类

export class FormFields {

      public jobTitle: boolean ;
      public opportunityType: boolean ;
      public industry: boolean ;
      public jobType: boolean ;
      public jobTags: boolean;
      
     }

创建函数以从提供的对象中隐藏字段

changeFieldVisibilityOnType(formObject, listOfFields) {
    for (let [key, value] of Object.entries(formObject)) {
      formObject[key] = listOfFields.includes(key) ? false : true;
    }
  }

3.进入 HTML 表单处理的更改事件。

<select class="form-control " name="Type" [(ngModel)]="model.Type"
                                                (change)="onChange($event)">
                                                <option data-display="Type">Select Type</option>
                                                <option [value]="jType.key"
                                                    *ngFor="let jType of masters.Types">{{jType.value}}
                                                </option>

最后进入 onChange() 函数，将需要隐藏的对象和字段数组传递给 changeFieldVisibilityOnType 函数。

onChange(event) {
    switch (event.target.value) {
      case 'JOB':
        var listOfFields = ["industry", "jobType"];
        this.changeFieldVisibilityOnType(this.objFormFields, listOfFields);
        break;
      case 'PAID_INTERN':
        listOfFields = ["jobType"];
        this.changeFieldVisibilityOnType(this.objFormFields, listOfFields);
      break;
    
    }
  }

希望这会对某人有所帮助。祝你好运！！

如何根据角度选择值隐藏输入字段？

5 个答案: