Проверка угловых 6

Question

Пытаюсь сделать проверку формы в угловых 6

HTML-код

<form [formGroup]="providerForm" (ngSubmit)="onClickSubmit()">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" required [(ngModel)]="provider.name"
                    name="name" placeholder="Name" formControlName="name">
                <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
                            <div *ngIf="f.name.errors.required"> Name is required</div>
                        </div>
            </div>
</form>

Component.ts

    export class ProviderserviceComponent implements OnInit {
        constructor(private modalService: NgbModal, public cdRef: ChangeDetectorRef, private formBuilder: FormBuilder) { }
         submitted = false;
        provider: Provider = new Provider();
        providerForm: FormGroup;

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

        }
        get f() { return this.providerForm.controls; }
        onClickSubmit(data) {
            this.submitted = true;

        }

В файле app.modeule.ts, component.ts я добавил следующие модули FormBuilder, FormGroup, валидаторы, когда я отлаживаю на html-файле, отображается ошибка.

Answer 1

HTML-файл

<form [formGroup]="providerForm" (ngSubmit)="onClickSubmit()">
   <div class="form-group">
    <label for="fname">Name</label>
     <input type="text" class="form-control" id="fname" required (ngModel)]="provider.fname" placeholder="Name" formControlName="fname" #fname>

     <div *ngIf="submitted && f.fname.errors" class="invalid-feedback">
      <div *ngIf="f.fname.errors.required"> Name is required</div>
      </div>
     </div>
</form>

Component.ts

export class ProviderserviceComponent implements OnInit {
        constructor(private formBuilder: FormBuilder) { }
         submitted = false;
        provider: Provider = new Provider();
        providerForm: FormGroup;

        ngOnInit() {
            this.providerForm = this.formBuilder.group({
                fname: ['', Validators.required]
            });

        }
        get f() { return this.providerForm.controls; }
        onClickSubmit(data) {
            this.submitted = true;

        }

Answer 2

Пожалуйста, не используйте FormBuilder и ngModel, потому что они оба используют одну и ту же работу

Например, попробуйте удалить

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

Answer 3

вы не должны использовать <input type="text" class="form-control" id="name" required [(ngModel)]="provider.name" ngmodel не требуется для реактивных форм.сопоставление выполняется на formControlName.Передача данных в форму осуществляется через setValue / patchValue.пожалуйста, проверьте документацию для минимального примера.