为什么我的按钮没有触发我的 javascript 功能？

Question

我有一个表单验证示例。如果我按下提交按钮，它必须显示警告消息，但它没有显示。

This is my sample: sample link

请帮我完成这件事。

我试过这样：

//button declaration

<button id="validateSubmit" [disabled]="reactForm.invalid" onclick="myFunction()" class="samplebtn e-control e-btn e-primary"
                            type="submit" style="height:40px;width: 150px;" data-ripple="true">Submit</button>
                            
//function for showing alert message
<script>
    function myFunction() {
        alert('your form is submitted');
    }
</script>

Answer 1

遵守代码约定非常重要。在计算机编程中，缩进样式是一种规范代码块缩进以传达程序结构的约定。但是，某些语言（例如 Python 和 occam）使用缩进来确定结构，而不是使用大括号或关键字；这被称为越位规则。

如果你像你那样做一些多space，它会产生一个错误，因为它会认为你的 class 属性值是 samplebtn e-control e-btn e-primary" type="submit" style="height:40px;width: 150px;" data-ripple="true">.

然后它认为Submit是你的button的另一个属性。这就是为什么它在不知道如何处理您的 < 之后产生错误的原因。

再次重申，为了避免该错误，请遵守以下约定，它会很好用。

同线约定

function myFunction() {
  alert('your form is submitted');
}

<button id="validateSubmit" [disabled]="reactForm.invalid" onclick="myFunction()" class="samplebtn e-control e-btn e-primary" type="submit" style="height:40px; width: 150px;" data-ripple="true">Submit</button>

缩进约定

另一种写法是缩进每个属性。

function myFunction() {
  alert('your form is submitted');
}

<button
  id="validateSubmit"
  [disabled]="reactForm.invalid"
  onclick="myFunction()"
  class="samplebtn e-control e-btn e-primary"
  type="submit"
  style="height:40px;width: 150px;"
  data-ripple="true">Submit</button>

Answer 2

Ideally its best to use typescript itself to your action. if so move your function to typescript file itself rather than in script.Sample

如果您想使用 angular

中的 javascript

您可以从控制台找到错误 window 这有助于调试。

export class ReactiveFormReactiveComponent implements OnInit {

reactForm: FormGroup;

constructor() {
  this.reactForm = new FormGroup({
    'check': new FormControl('required', [FormValidators.required]),
    'email_check': new FormControl('someone@gmail.com', [FormValidators.email]),
    'url_check': new FormControl('www.anything.com', [FormValidators.url]),

  });
}

ngOnInit(): void {

}

get check() { return this.reactForm.get('check'); }


  myFunction() {
     alert('your form is submitted');
 }

}

为什么我的按钮没有触发我的 javascript 功能？

Why my button doesn't trigger my javascript function?

alert

typescript

angular

同线约定

缩进约定