С помощью директивы ngModel можно передавать данные, с помощью директивы FormControlName приводить пустую модель - PullRequest
Новая
       18

С помощью директивы ngModel можно передавать данные, с помощью директивы FormControlName приводить пустую модель

0 голосов
/ 13 декабря 2018

Я пробую реактивные формы, я не знаю почему, но если я использую директиву ngModel = "interface.option", мое значение пропускается, но без этой директивы нет.

Это мой HTML

<div class="container-fluid header-con">
<div class="row">
    <div class="col no-float header-col">
        <div class="container text-center">
            <h1>Sign up it's free!</h1>
        </div>
    </div>
    <div class="col no-float header-col">
        <form (ngSubmit)="onSubmit()" [formGroup]="form">
            <div class="container signup">
                <div class="form-group">
                    <input type="text" class="form-control" formControlName="_name" [ngClass]="{ 'is-invalid': submitted && f._name.errors }" placeholder="Name" required>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" formControlName="_username" [ngClass]="{ 'is-invalid': submitted && f._username.errors }" placeholder="Username" required>
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" formControlName="_email" [ngClass]="{ 'is-invalid': submitted && f._email.errors }" placeholder="Email" required>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" formControlName="_password" [ngClass]="{ 'is-invalid': submitted && f._password.errors }" placeholder="Password" required>
                </div>
                <div class="form-group">
                    <button type="submit" [disabled]="!form.valid" class="btn btn-secondary btn-lg btn-block">Sign up</button>
                </div>
            </div>
        </form>
    </div>
</div>

И мой компонент: 

  import { Component, OnInit } from '@angular/core';
import { User } from '../../interfaces/user.interface';
import { Http } from '@angular/http';
import { RestService } from '../../services/rest.service';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

    form: FormGroup;
    submitted = false;
  user: User = {
    _name: '',
    _username: '',
    _email: '',
    _password: ''
    };
  constructor( private _restservice: RestService,
               private http: Http,
               private formBuilder: FormBuilder ) {

                 }

  ngOnInit() {
    this.form = this.formBuilder.group({
      _name: ['', Validators.required],
      _username: ['', Validators.required],
      _email: ['', [Validators.required, Validators.email]],
      _password: ['', [Validators.required, Validators.minLength(8)]]
  });
  }
  get f() { return this.form.controls; }
  onSubmit() {
    this.submitted = true;
    if (this.form.invalid) {
      return;
  } else {
    console.log(this.user);
    this._restservice.newUser ( this.user )
    .subscribe ( data => {
    }); }
  }
  }
}

После отправки моего результата через форму пустой объект json:

{"_name":" "," _username ":" "," _email ":" "," _password ":" "}

Что я делаю не так в контроллере формы?.

Спасибоза вашу помощь.

...