代码之家 › 专栏 › 技术社区 › Remi

如何通过表格。从动态组件到“消费者组件”有效

angular

0

Remi · 技术社区 · 4 年前

在应用程序表单组件中有一个表单。在“消费者组件”(如果我错了,请纠正我,否则不确定该怎么称呼它)中,如果表单有效,我希望启用或禁用按钮。

因此,从消费者部分开始:

应用程序的事情。组成部分ts(消费者)

// ...imports

@Component({
  selector: 'app-thing',
  template: `
    <app-form (isValidForm)="checkFormValidity($event)">
      <ng-container action>
        <button [disabled]="!buttonEnabled">Submit</button>
      </ng-container>
    </app-form>
  `,
})
export class AppThing {
  buttonEnabled = false;

  checkFormValidity(isValid: boolean) {
    this.buttonEnabled = isValid;
  }
}

现在听我用 onchange 表格中的事件:

/申请表。组件。ts(动态组件)

// ...imports

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="form" (change)="formChange()">
      <label>
        Name:
        <input type="text" formControlName="name" />
      </label>
      <ng-content select="[action]"></ng-content>
    </form>
  `
});
export class FormComponent {
  @Output()
  isValidForm = new EventEmitter<boolean>();

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

  constructor(private formBuilder: FormBuilder) {}

  formChange() {
    this.isValidForm.emit(this.form.valid);
  }
}

但现在,它只在用户在输入更改后单击页面上的某个位置时启用或禁用按钮。

当输入值发生变化时,如何更改此选项,使其启用/禁用按钮?

0 回复 | 直到 4 年前

1

0

Crafted Pod 4 年前

Here 这是一个有效的例子。

我们可以使用 FormGroup statusChanges 当表单状态发生变化时通知我们的可观察属性。

// form.component.ts
@Component({
  selector: "app-form",
  templateUrl: "./form.component.html",
  styleUrls: ["./form.component.css"]
})
export class FormComponent implements OnInit {
  public nameForm: FormGroup;

  @Output()
  public readonly formValid$: Observable<boolean>;

  constructor(private fb: FormBuilder) {
    this.buildForm();
    this.formValid$ = this.nameForm.statusChanges.pipe(
      debounceTime(300),
      map(() => this.nameForm.valid),
      distinctUntilChanged()
    );
  }

  ngOnInit() {}

  private buildForm() {
    this.nameForm = this.fb.group({
      name: ["", Validators.required]
    });
  }
}

我们把它分配给 formValid$ 看得见。

这个 @Output decorator用于将状态更改传递给父组件。

我们使用 debounceTime 和 distinctUntilChanged 以限制发出的事件数。

// app.component.ts
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public onChangeFormValidity(formValid: boolean) {
    console.log(formValid);
  }
}

我们约束自己 onChangeFormValidity 方法 形式有效$ 输出属性。

// app.component.html
<app-form (formValid$)="onChangeFormValidity($event)"></app-form>