Angular нажатие кнопки не получило значения формы

Question

Я новичок в angular, и я пытаюсь создать нового пользователя из формы, но я обнаружил, что когда я регистрирую значения в моей форме, это возвращает мне пустой объект, тогда PLz помогает мне, ребята, я не не знаю, как это исправить и что я пропустил.

users.component. html:

<div class="container">
    <mat-toolbar>
        <span class="Centre">Créer Un Utilisateur</span>
    </mat-toolbar>
    <form [formGroup]="service.form" class="normal_from">
        <mat-grid-list cols="2" rowHeight="150px">
            <mat-grid-tile>
                <div class="controles-container">
                    <mat-form-field>
                    <input fromControlName="Fname" matInput placeholder="Nom Complet*">
                    <mat-error>tu faux remplir ce champs.</mat-error>
                    </mat-form-field>
                    <mat-form-field>
                    <input fromControlName="CIN" matInput placeholder="CIN*">
                    <mat-error>tu faux remplir ce champs.</mat-error>
                    </mat-form-field>
                    <mat-form-field>
                    <input fromControlName="email" matInput placeholder="Email*">
                    <mat-error>L'email n'est pas valider.</mat-error>
                    </mat-form-field>

                </div>
            </mat-grid-tile>
            <mat-grid-tile>
                <div class="controles-container">
                    <div class="add-bottom-padding">
                        <mat-radio-group fromControlName="gender">
                            <mat-radio-button value="1" checked>Homme</mat-radio-button>
                            <mat-radio-button value="2">Famme</mat-radio-button>
                          </mat-radio-group>
                    </div>
                    <mat-form-field>
                    <input fromControlName="age" matInput placeholder="age">
                    </mat-form-field>
                    <mat-form-field>
                    <input fromControlName="Role" matInput placeholder="Role">
                    </mat-form-field>


                </div>    
            </mat-grid-tile>
        </mat-grid-list>
        <div class="button_box">
            <button mat-raised-button color="primary" type="submit" class="sub" (click)="onSub()">Créer</button>
            <button mat-raised-button color="accent" (click)="onClear()">Annuler</button>
        </div>
    </form>
</div>

users.component.ts:

import { Component, OnInit } from '@angular/core';
import { CollectionService } from '../../collection.service';
@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {

  constructor(public service: CollectionService) { }

  ngOnInit(): void {
  }
  onClear(){
    this.service.form.reset();
    this.service.InitForm();
  }
  onSub(){
    console.log(this.service.form.value);
    if(this.service.form.valid){
      this.service.RegisterUsers(this.service.form.value);
    }
  }
}

и collection.service.ts:

 form: FormGroup = new FormGroup({
    $key: new FormControl(null),
    Fname: new FormControl('', Validators.required),
    CIN: new FormControl('', [Validators.required]),
    email: new FormControl('', Validators.email),
    age: new FormControl(''),
    Role: new FormControl(''),
    gender: new FormControl('1')
  });
  InitForm(){
    this.form.setValue({
    $key: null,
    Fname: '',
    CIN: '', 
    email:'',
    age:'',
    Role:'',
    gender:'1'
    });
  }

Rq: даже this.service.form.reset (); this.service.InitForm (); тоже не работал.

Answer 1

Я думаю, что вы должны написать декларацию формы и управление непосредственно в component.ts. Затем вам нужно использовать FormBuilder:

export class UsersComponent implements OnInit {

  form: ForGroup;

  constructor(private service: CollectionService, private fb: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      $key: new FormControl(null),
      Fname: new FormControl('', Validators.required),
      CIN: new FormControl('', [Validators.required]),
      email: new FormControl('', Validators.email),
      age: new FormControl(''),
      Role: new FormControl(''),
      gender: new FormControl('1')
    });
  }

  onSub(){
    console.log(this.form.value);
    this.service.RegisterUsers(this.form.value);
  }
}

<form [formGroup]="form" class="normal_from">

  <!-- Your form fields ... -->

  <div class="button_box">
    <button mat-raised-button color="primary" [disabled]="!form.valid" type="submit" class="sub" (click)="onSub()">Créer</button>
    <button mat-raised-button color="accent" type="reset">Annuler</button>
  </div>
</form>

• Вам не нужно проверять правильность формы в .ts, так как вы можете напрямую сделать это в .html.

• Вам не нужна функция для динамического сброса формы, если единственное действие, которое вам нужно, это сброс формы.

• Вам необходимо использовать FormBuilder

Пожалуйста, объясните:

• Почему вы положили свою форму в сервис?
• Метод RegisterUsers возвращает Observable?