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 -->

如果我点击验证按钮然后获取名称输入的值并传递到我的组件中的函数，我想做什么，如下所示

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

所以如果模板中的输入名称的值（和它的子串）等于我的id.param（我从角度路径中的subsribe id得到），那么控制台日志将为true。但问题是什么都没有出来。如何解决这个问题

如果你想知道我是如何得到我的id.param。这是mycode

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="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 2

您可以使用FormControl使用的FormBuilder。请查看以下代码段

HTML Code Snippet

<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提交整个表单。如果表单无效，则禁用禁用按钮功能。

让我们检查以下代码段中的组件

组件代码段

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中用于绑定数据（两个绑定）在构造函数中创建testForm FormBuilder实例并使用{ {1}}约束。检查required方法，点击submitForm按钮后，console.log会触发

Answer 3

试试这样

<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 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);
}

Angular2在buttonclick上从模板传递值到函数

5 个答案: