0

can someone help me why I keep having the falling issue?

Object literal may only specify known properties, and 'name' does not exist in type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'.

export class AddContactFormComponent implements OnInit {
  public isShowForm:boolean = false;
  
  public addContactForm: FormGroup;

  public showFrom(): void{
    this.isShowForm = true;
  }
  ngOnInit(): void {
    this.addContactForm = new FormGroup(controls: {
      name: new FormControl(null,{validators:[Validators.required]}),
      phone: new FormControl(null,{validators:[Validators.required]}),
    })
  }

}
<button class="add-contact" *ngIf="!isShowForm" (click)="showFrom()">Add new contact</button>

<form action="" *ngIf="isShowForm" [formGroup]="addContactForm">
  <div class="form__body">
    <div class="form__group">
      <label for="">Name</label>
      <input type="text" placeholder="name" formContralName="name">
    </div>
    <div class="form__group">
      <label for="">Phone</label>
      <input type="text" placeholder="Phone" formContralName="phone">
    </div>
  </div>
  <div class="form__footer">
    <button type="sumbit" class="submit">create contact</button>
  </div>
</form>

Improve this question
7
  • It was supposed to be the "following" issue (rushed a bit) Commented Aug 11, 2021 at 13:38
  • 2
    you can edit your question. in the html shouldn't it be formControl not formContral? Commented Aug 11, 2021 at 13:39
  • Just use new FormControl(null, [Validators.required]) syntax Commented Aug 11, 2021 at 13:42
  • 1
    <input type="text" placeholder="Phone" formContralName="phone"> formContralName change to "formControlName" Commented Aug 11, 2021 at 13:43
  • @depperm thank you for pointing it out, I did change it to control, now the problem became name doesn't exist in validation form which it actually does :sad emoji Commented Aug 11, 2021 at 13:54

1 Answer 1

Reset to default
1

Please use angular's formBuilder. It is very useful for this.

Example:

this.addContactForm = this.formBuilder.group({
  name: ['', Validators.required],
  phone: ['', Validators.required]
});

of course, you have to inject the formBuilder: FormBuilder to your constructor.

You can still create the form the way you did it, but I guess you have a syntax error.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments