Angular2 en passant la valeur à partir d'un modèle de fonction sur buttonclick

j'ai angular2 modèle de formulaire de composant comme ce ci-dessous

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

ce que je veux faire si je clique sur le bouton vérifier ensuite obtenir la valeur de nom d'entrée et de passer à ma fonction dans mon composant qui est comme ci-dessous

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

donc, si la valeur de l'entrée nom de modèle (et sous-chaîne) est égal de ma carte d'identité.param(qui est je reçois de pouvoir s'inscrire id angulaire de route) donc le journal de la console sera vrai. mais le problème n'en est rien sorti. comment faire pour résoudre ce

si u veux savoir comment j'obtiens ma carte d'identité.param. voici 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

       });

Vous devriez ajouter un ngModel à l'entrée, puis saisir la valeur
Êtes-vous à l'aide de FormControl en HTML?

InformationsquelleAutor dedypuji | 2017-06-15

angular

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

puis dans votre .ts

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

heureux de vous aider
Merci. Fonctionne comme prévu, même à l'intérieur de ngFor.

InformationsquelleAutor ashley

5

Vous pouvez utiliser FormControl de la FormBuilder votre aide. Découvrez ci-dessous l'extrait de code

Extrait de Code 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>
```
Ci-dessus vous avez pu voir que j'ai form étiquette avec le formGroup nom défini comme testForm et ngSubmit appel submitForm méthode avec testForm les valeurs d'instance de

À part que j'ai de la définition d'un ngModel et FormControl pour la balise input. En outre, j'ai ajouté Requis contrainte message. Un type de bouton submitdepuis que je suis en utilisant ngSubmit de soumettre le formulaire. et une fonction de désactivation pour désactiver le bouton si le formulaire n'est pas valide.

Permet de vérifier le composant dans l'extrait de code ci-dessous

Composant Extrait De Code
```
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);
  }
}
```
Vous devez créer un User Modèle avec les caractéristiques désirées. L'utiliser pour créer user instance qui sera utilisé dans la ngModel en html pour lier les données (deux de liaison) Créer testForm instance de FormBuilder dans le constructeur et avec l' required contrainte. De vérifier la submitForm méthode, console.log se déclenche une fois u cliquez sur Verify bouton avec la valeur

InformationsquelleAutor Keshan Nageswaran

Donner un essai Comme ça

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

Exemple Plunker

il retourne l'erreur comme ce monsieur Ne peut pas attribuer à une référence ou une variable

InformationsquelleAutor balajivaishnav

essayer cette

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

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

InformationsquelleAutor Arjun

Vous devez vous connecter pour publier un commentaire.