同一行约定

Question

我有一个表格验证样本。如果按提交按钮，它必须显示警报消息，但不显示。

这是我的示例： 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）使用缩进来确定结构，而不是使用大括号或关键字。这就是越位规则。

如果像您一样制作多个空格，则会产生错误，因为它将认为您的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

理想情况下，最好是将打字稿本身用于操作。如果是这样，请将您的函数移至打字稿文件本身而非脚本中。Sample

如果您想使用角度see here中的javascript

您可以从控制台窗口中找到有助于调试的错误。

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函数？

2 个答案:

同一行约定

缩进约定