Angular-6验证

Question

我正在尝试在angular 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

你不应该使用<input type="text" class="form-control" id="name" required [(ngModel)]="provider.name"，ngmodel不是反应式表单所必需的。匹配在formControlName上完成。向表单传递数据是通过setValue / patchValue完成的。请查看文档中的最小示例。

Answer 2

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 3

请不要使用FormBuilder和ngModel，因为它们使用的是相同的工作

例如，尝试删除

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