Angular8 не может прочитать свойство 'valid' из undefined для формы

Question

Я использую регистрационную форму для добавления сотрудника .. и использую проверку для этого. но по какой-то причине он выдает мне ошибку

"невозможно прочитать свойство 'valid' из неопределенного"

Это мой код

HTML

<div  class="container" style="background-color: gainsboro;">

    <form [formGroup]="registerForm" #form=ngForm (ngSubmit)="f.form.valid && onSubmit(form.value)">
        <div class="form-row">
        <div class="form-group col-xs-6 col-sm-6">
            <br>
            <select formControlName="jobid" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.jobid.errors }">
                <option value="">Select Job</option>
                <option *ngFor="let item of this.jobList" value="{{item.id}}">{{item.name}}</option>
            </select>
            <div *ngIf="submitted && f.jobid.errors" class="invalid-feedback">
                <div *ngIf="f.jobid.errors.required">Job is required</div>
            </div>
        </div>
        <div class="form-group col-xs-6 col-sm-6">
            <br>
            <input type="date" placeholder="Joining Date" formControlName="date" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.date.errors }" />
            <div *ngIf="submitted && f.date.errors" class="invalid-feedback">
                <div *ngIf="f.date.errors.required">Joining Date is required</div>
            </div>
        </div> 
    </div>

        <div class="form-row">

            <div class="form-group col-xs-6 col-sm-6">
                <br>
                <input type="text" placeholder="First Name" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }"  pattern="[a-zA-Z][a-zA-Z\s]*"/>
                <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                    <div *ngIf="f.firstName.errors.required">First Name is required</div>
                    <div *ngIf="f.firstName.errors.pattern">Please enter a correct name</div>
                </div>
            </div>
            <div class="form-group col-xs-6 col-sm-6">
                <br>
                <input type="text" placeholder="Last Name" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }"  pattern="[a-zA-Z][a-zA-Z\s]*"/>
                <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                    <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                    <div *ngIf="f.lastName.errors.pattern">Please enter a correct name</div>

                </div>
            </div>
        </div>

         <button type="submit" class="btn btn-outline-success btnborder">Register</button>


    </form>
</div>

ts файл

export class NewEmployeeComponent implements OnInit {
  registerForm: FormGroup;
  submitted = false;
  constructor(private formBuilder: FormBuilder,private service:NewEmployeeService) { 
    this.getJobs()
  }
  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      jobid: ['', Validators.required],
      firstName: ['', Validators.required],
      date: ['', Validators.required],
      lastName: ['', Validators.required],

  }, {
      // validator: MustMatch('password', 'confirmPassword')
  });
  }

 get f() { return this.registerForm.controls; }

 onSubmit(event:any) {

    console.log(event)
     this.submitted = true;

     // stop here if form is invalid
     if (this.registerForm.invalid) {
          return;
      }
    Swal.fire("Successfull","New employee registration is successfull","success")
 }
  public jobList:any=[]
  public getJobs()
  {
    this.service.getJobList().subscribe(data=>{
      this.jobList=data;
    })
  }

}

всякий раз, когда я использую этот код (ngSubmit) = "onSubmit (form.value)" проверка работает, а также значение NULL передает ..

когда я использую это

(ngSubmit) = "f.valid && (ngSubmit)"

проверка правильности не работает и функция отправки также не работает

и эта ошибка показывает

Answer 1

Проблема с приведенным ниже кодом get f () {return this.registerForm.controls; } изменить, чтобы вернуть this.registerForm

Answer 2

Просто удалите условие registerForm.valid из вашего события (ngSubmit) внутри тега form. Это условие не позволяет вам отправить форму, и ваши проверки не работают.

Просто напишите:

(ngSubmit)="onSubmit(form.value)"

Answer 3

Вы получили сообщение об ошибке, потому что get f(){...} не возвращает FromGroup. Он возвращает controls объект FromGroup, и для этого объекта не определен атрибут form. И из-за этого вы получаете сообщение об ошибке Cannot read property 'valid' of undefined.

Вы должны использовать FormGroup напрямую:

(ngSubmit)="registerForm.valid && onSubmit(form.value)"

Обновление:

Как я могу видеть из предоставленного вами стекаблица, проверка работает. Ваш класс ошибок is-invalid применяется только в том случае, если форма отправлена, что вы и делаете, когда форма недействительна.

Таким образом, вы должны изменить применение вашего класса ошибок или добавить другое логическое значение, для которого установлено значение true, когда вы нажимаете на кнопку отправки.

Первый вариант

[ngClass]="{ 'is-invalid': f.jobid.errors }"

Второй вариант (рекомендуется imo)

В вашем HTML:

(ngSubmit)="onSubmit(form.value)"

И в вашем компоненте:

onSubmit(event:any) {

    console.log(event)
    this.submitted = true;

    // stop here if form is not valid
    // RECOMMENDATION Use !FromGroup.valid, because with async validation neither valid nor invalid is set
    if (!this.registerForm.valid) {
      return;
    }
    Swal.fire("Successfull","New employee registration is successfull","success")

}

В этом случае представленный флаг установлен в true, и ваша ошибка класс применяется правильно.