Angular2中输入框输入内容后显示按钮及媒体判断按钮问题

看起来你在Angular的输入框交互上遇到了几个问题，我来一步步帮你解决——先搞定现有输入框的异常，再实现你要的两个需求。

一、先修复你现有输入框的异常 #

你当前的输入框无法输入内容、出现异常，大概率是缺少双向数据绑定导致的，另外(change)事件的触发时机也可能不是你预期的（它要等输入框失去焦点才会触发）。先给你把代码改对：

<div class="type-video" [hidden]="selectedImage !== 'video'">
  <span style="margin-left: 12%;">or </span>
  <!-- 添加ngModel双向绑定，用input事件实时响应输入 -->
  <input 
    type="text" 
    class="form-control form-textbox input-text" 
    [(ngModel)]="media.videoUrl"  <!-- 假设media有videoUrl属性，可换成你自己的变量 -->
    (input)="onVideoUrlInput($event, media)"  <!-- input事件实时监听输入变化 -->
    style="width: 28%;margin-right: 24%;"
  >
</div>

对应的组件类需要做这两件事：

1. 确保media对象在组件中初始化：

media = {
  videoUrl: ''  // 初始化空字符串，避免未定义报错
};

2. 实现onVideoUrlInput方法（如果需要实时处理输入内容）：

onVideoUrlInput(event: Event, media: any) {
  // 实时更新media的属性，和ngModel双向绑定效果一致，也可以省略
  media.videoUrl = (event.target as HTMLInputElement).value;
}

另外记得检查selectedImage变量是否正确初始化，确保当它等于'video'时这个div能正常显示，避免因变量未定义导致的隐藏异常。

二、需求1：输入文字后显示按钮 #

核心思路是把按钮的显示状态绑定到输入框内容是否为空，结合上面修复后的代码，改造如下：

模板代码 #

<div class="type-video" [hidden]="selectedImage !== 'video'">
  <span style="margin-left: 12%;">or </span>
  <input 
    type="text" 
    class="form-control form-textbox input-text" 
    [(ngModel)]="media.videoUrl"
    (input)="onVideoUrlInput($event, media)"
    style="width: 28%;margin-right: 24%;"
  >
  <!-- 当输入框内容不为空时显示按钮 -->
  <button 
    *ngIf="media.videoUrl.trim() !== ''" 
    class="btn btn-primary"
    (click)="handleVideoSubmit(media)"
  >
    确认提交
  </button>
</div>

组件类补充方法 #

handleVideoSubmit(media: any) {
  // 这里写按钮点击后的业务逻辑，比如提交视频链接
  console.log('提交的视频链接:', media.videoUrl);
}

三、需求2：根据输入框是否有媒体内容显示添加/修改按钮 #

这里的核心是判断输入框内容是否为初始空状态：如果原本是空的，输入内容后显示「添加按钮」；如果原本已有内容（比如编辑场景），则显示「修改按钮」。

实现步骤 #

1. 在组件中保存媒体内容的初始值：

originalVideoUrl = '';
media = {
  videoUrl: ''
};

// 假设从接口获取媒体数据时，保存初始值
ngOnInit() {
  // 示例：从服务获取媒体数据
  // this.media = this.mediaService.getMediaDetail();
  this.originalVideoUrl = this.media.videoUrl;
}

2. 模板中根据初始值和当前值判断显示对应按钮：

<div class="type-video" [hidden]="selectedImage !== 'video'">
  <span style="margin-left: 12%;">or </span>
  <input 
    type="text" 
    class="form-control form-textbox input-text" 
    [(ngModel)]="media.videoUrl"
    (input)="onVideoUrlInput($event, media)"
    style="width: 28%;margin-right: 24%;"
  >

  <!-- 输入框有内容时，根据初始值判断显示添加/修改按钮 -->
  <ng-container *ngIf="media.videoUrl.trim() !== ''">
    <button 
      *ngIf="originalVideoUrl.trim() === ''" 
      class="btn btn-success"
      (click)="addMedia(media)"
    >
      添加媒体
    </button>
    <button 
      *ngIf="originalVideoUrl.trim() !== '' && media.videoUrl !== originalVideoUrl" 
      class="btn btn-warning"
      (click)="updateMedia(media)"
    >
      修改媒体
    </button>
  </ng-container>
</div>

3. 组件类实现添加和修改方法：

addMedia(media: any) {
  // 添加媒体的业务逻辑
  console.log('添加新视频:', media.videoUrl);
}

updateMedia(media: any) {
  // 修改媒体的业务逻辑
  console.log('更新视频链接:', media.videoUrl);
}

额外优化提示 #

• 尽量避免在模板中写复杂条件判断，可以把判断逻辑抽成组件的getter方法，让模板更简洁：

get shouldShowAddBtn(): boolean {
  return this.media.videoUrl.trim() !== '' && this.originalVideoUrl.trim() === '';
}

get shouldShowUpdateBtn(): boolean {
  return this.media.videoUrl.trim() !== '' && this.originalVideoUrl.trim() !== '' && this.media.videoUrl !== this.originalVideoUrl;
}

之后模板中直接用*ngIf="shouldShowAddBtn"即可。

• 建议把inline style移到CSS文件中，保持模板的整洁性。

内容的提问来源于stack exchange，提问作者Bhrungarajni