Search Angular Formbuilder

89 Views Asked by At

I am looking for a way to build forms as admin on the interface. These should later be integrated as part of a "large" form to be queried. Before I build something myself I wanted to ask if someone knows an extension or something similar.

Thanks for your help :)

1

There are 1 best solutions below

0
Hamada On

It's good that you try something, and @Community will help you, this how it works. Here is a Basic Form to start;

In your HTML file;

<form [formGroup]="formAngular" (ngSubmit)="onSubmit()">
        <label>Name</label>
        <input type="text" formControlName="admin">

        {{formAngular.controls.admin.errors | json}}

        <p 
            *ngIf="formAngular.controls.admin.errors?.required && formAngular.controls.admin.touched && formSend">
            It is required your name
        </p>

    <input type="submit" value="Send"  />

    <p  *ngIf="formSend && !formAngular.valid">Form is not complete</p>

</form>

In your component TS file;

  formAngular: FormGroup;

  formSend: boolean;

  constructor() {
    this.formSend = false;
    this.formAngular = new FormGroup({
      admin: new FormControl('', [
        Validators.required,
        Validators.maxLength(10)
      ])
  }

onSubmit() {
    this.formSend = true;
    console.log("Form value: ", this.formAngular.value);
  }


ngOnInit() {
    const controlAdmin = this.formAngular.controls.admin;
    controlName.valueChanges.pipe(debounceTime(500)).subscribe(value => {
      console.log("Your changes: ", value);
    });
  }