Angular 2 将值从模板传递到按钮单击时的函数

Question

我有一个这样的组件的 Angular2 表单模板：

<div class="container">

  <div class="input-group">
    <label> Masukkan nik </label>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" #name>
  </div>
     <button (click)="verifyNik(name.value)">Verify</button>

</div> <!-- /container -->

如果我单击Verify 按钮，我想要做的是获取名称输入的值并将其传递给我的组件中的函数，如下所示：

verifyNik(nik){
    if(this.idparam==nik.substring(1,4)){
      console.log("true");
    }
  }

因此，如果模板中输入名称的值（及其子字符串）等于我的id.param（我从 Angular 路由中的订阅 id 获得），那么控制台日志将为真；但问题是没有任何结果。我该如何解决这个问题？

获取id.param 的代码如下：

private idchild:any;
  f: FormGroup;
  private idparam:any;


  constructor(
    private fb: FormBuilder,
    private servicedev:DevService,
    private complaintservice:ComplaintService,
    private router: ActivatedRoute
  ) { }

     ngOnInit() {
        this.idchild = this.router.params.subscribe(params => {

           let id = params['id'];
           this.idparam=id;

          // Retrieve Pet with Id route param

       });

Answer 1

试试这个

<div class="container">

  <div class="input-group">
    <label> Masukkan nik </label>
    <input type="text" class="form-control" [(ngModel)]="name"placeholder="Username" aria-describedby="basic-addon1" #name>
  </div>
     <button (click)="verifyNik(name)">Verify</button>

</div>

verifyNik(nik){
    if(this.idparam==nik.substring(1,4)){
      console.log("true");
    }
  }

例如Plunker

Answer 2

<div class="input-group">
  <label> Masukkan nik </label>
  <input type="text" class="form-control" placeholder="Username" 
   aria-describedby="basic-addon1" #name>
</div>
<button (click)="verifyNik(name)">Verify</button>

然后在您的 .ts 中

verifyNik(nik) {
  if(this.idparam == nik.value.substring(1, 4)) {
    console.log("true");
  }
}

Answer 3

您可以使用FormControl 中的FormBuilder。检查下面的代码sn-p

HTML 代码片段

<form [formGroup]="testForm" (ngSubmit)="submitForm(testForm.value)">
  <div class="form-group">
    <label> Masukkan nik </label>
    <input type="text" class="form-control" placeholder="Username" [formControl]="testForm.controls['name']" [(ngModel)]="user.name">
    <div *ngIf="testForm.controls['name'].hasError('required') && testForm.controls['name'].touched" class="alert alert-danger">Name field cannot be empty.</div>
  </div>
  <button class="btn btn-info" type="submit" [disabled]="!testForm.valid">Verify</button>
</form>

在上面你可以看到我有form标签，formGroup名称定义为testForm和ngSubmit调用submitForm方法和testForm实例值

除此之外，我还为输入标签定义了ngModel 和FormControl。此外，我添加了必需的约束消息。一个按钮类型submit因为我正在使用 ngSubmit 提交整个表单。如果表单无效，还有禁用按钮的禁用功能。

让我们检查下面代码sn-p中的组件

组件代码片段

export class TestComponent implements OnInit {
  user: User = new User('');
  constructor(fb: FormBuilder) {
    this.testForm = fb.group({
      'name': [null, Validators.required]
    });
  }

  ngOnInit() {

  }

  submitForm(value: any) {
    console.log(value);
  }
}

您必须创建一个具有所需属性的User 模型。使用它创建user 实例，该实例将用于html 中的ngModel 绑定数据（两个绑定） 在构造函数中创建FormBuilder 的testForm 实例并使用required 约束。检查submitForm方法，一旦你点击带有值的Verify按钮，console.log就会触发

Answer 4

试试这个

        <div class="container">
            <div class="input-group">
                <label> Masukkan nik </label>
                <input type="text" class="form-control" [(ngModel)]="model.name" name="name" placeholder="Username" aria-describedby="basic-addon1" #name="ngModel">
            </div>
            <button (click)="verifyNik(name)">Verify</button>
        </div>

你的 TS

    model = {
        name : null
    };
    private idparam = "FooBar";

    verifyNik(obj) {
        if (this.idparam === obj.viewModel.substring(1, 4)) {
            console.info("true");
        }
    }

或

    <div class="input-group">
                <label> Masukkan nik </label>
                <input type="text" class="form-control" [(ngModel)]="model.name" name="name" placeholder="Username" aria-describedby="basic-addon1" #name="ngModel">
            </div>
            <button (click)="verifyNik(model.name)">Verify</button>

    verifyNik(obj) {
        if (this.idparam === obj.substring(1, 4)) {
            console.info("true");
        }
    }

Answer 5

<button #ee value="sravan" name="b1"(click)="fun(ee.value)">button 1</button>
<button #ff name="b2" value="buttontwo"(click)="fun(ff.value)">button 2</button>
<button #hh name="b3"value="buttonthree"(click)="fun(hh.value)">button3</button>
<button #kk name="b4" value="buttonfour"(click)="fun(kk.value)">button4</button>
<button  #ll name="b5"value="buttonfive"(click)="fun(ll.value)">button5</button>

value = {{selecte}}



    <input type="text"  #name>

  <button (click)="ver(name.value)">Verify</button>



ts:

selecte:any;
fun(data:string){
  this.selecte=data;
}

ver(sara:string) {

  console.log(sara);
}