如果文本字段为空则添加验证

Question

我是 Angular 和 Ionic 的新手，我正在尝试在我的警报文本框中添加验证。 默认情况下，我通过 css 禁用提交图标

“.comment-history-box{指针事件：无;}”

。如果用户在字段中添加了任何评论，我想删除该属性。

async presentAlert() {
  
  const alert = await this.alertController.create({
    inputs: [
      {
        name: 'comment',
        type: 'textarea',
        placeholder: 'Enter your comment...',
        cssClass: 'custom-textarea',
        attributes: {
          maxlength: 60  // Add maxlength attribute to limit character input
        }
      }
    ],
    buttons: [
      {
        text: '✖',
        role: 'cancel',
        cssClass: 'secondary',
        handler: () => {
          console.log('Cancel clicked');
          this.openDateTimePickerOverlay()
        }
      }, {
        text: '✓',
        cssClass: 'comment_box_history',
        handler: async (data) => {
          if (data.comment && data.comment.trim() !== '') {
            this.store_user_data.description = data.comment;
            console.log(this.store_user_data);
            this.saveData(this.store_user_data);
          } else{
            return false;
          }
        }
      }
    ]
  });

如有任何帮助，我们将不胜感激。

Answer 1

由于您在创建并呈现对象后使用alertController，因此不可能动态更改内部数据。

我建议你用 toast 来处理空评论错误，让用户了解评论输入有什么问题

async presentAlert() {
          
            const alert = await this.alertController.create({
              inputs: [
                {
                  name: 'comment',
                  type: 'textarea',
                  placeholder: 'Enter your comment...',
                  cssClass: 'custom-textarea',
                  attributes: {
                    maxlength: 60  // Add maxlength attribute to limit character input
                  }
                }
              ],
              buttons: [
                {
                  text: '✖',
                  role: 'cancel',
                  cssClass: 'secondary',
                  handler: () => {
                    console.log('Cancel clicked');
                    this.openDateTimePickerOverlay()
                  }
                }, {
                  text: '✓',
                  cssClass: 'comment_box_history',
                  handler: async (data) => {
                    if (data.comment && data.comment.trim() !== '') {
                      this.store_user_data.description = data.comment;
                      console.log(this.store_user_data);
                      this.saveData(this.store_user_data);
                    } else{
                      let toast = await this.toastController.create({
                        message: "comment not valid",
                        duration: 3000,
                        position: 'top',
                        color: "danger"
                      });
                      toast.present();
                      return false;
                    }
                  }
                }
              ]
            });
        
            alert.present()
    }