如何在ngform

Question

<form #apiForm="ngForm" (submit)="onSubmit(apiForm);">
    <div class="apply-form">
    <div>
    <label>API Name <span class="astrik">*</span></label>
    <input type="text" placeholder="e.g presonal key" name="name" />
    </div>
    <div>
</form>

我想获取输入值，以便可以对其进行验证。

 onSubmit(apiForm: any) {
    console.log(apiForm.controls.name.value)
    console.log(apiForm.name.value)
    if(apiForm.name.value) {
      alert()
    }
  }

Answer 1

在这里，您正在使用模板驱动的表单，

我们需要使用ngForm指令显式注册每个模板控件。为此，我们需要对每个模板表单控件做两件事：

添加ngModel指令 添加名称属性

<form #apiForm="ngForm" (submit)="onSubmit(apiForm);">
    <div class="apply-form">
    <div>
    <label>API Name <span class="astrik">*</span></label>
    <input type="text" placeholder="e.g presonal key" name="name" ngModel/>
    </div>
    <div>
</form>

您可以使用apiForm.value获取表单的json对象。

我建议您不要使用功能验证，而建议您使用表单控件状态并在模板上添加验证消息。

引用Template Driven Forms in Angular

如果您有任何疑问，请告诉我。

Answer 2

使用[[ngModel）]作为输入：-

<input type="text" placeholder="e.g presonal key" name="name" 
[(ngModel)]="apiForm.name"/>

在Typescript文件上声明apiForm

 apiForm = {
    name:''
 }

 onSubmit(apiForm: any) {
   console.log(apiForm.controls.name.value)
   console.log(apiForm.name.value)
   if(apiForm.name.value) {
     alert()
   }
   }

Answer 3

// You can achieve this using ngModel. don't forget to import FormsModule in your app.module.ts file.


    <input type="text" placeholder="e.g presonal key"
        [(ngModel)]="apiForm.name"/>

        apiForm={name:null};

        onSubmit(apiForm: any) {
           console.log(this.apiForm.name)              
           }