小编Dhe*_*k S的帖子

使用flutter_bloc在flutter中提交时如何验证表单?

这是我的更改密码屏幕。我正在使用 flutter_bloc 来实现 mvvc 模式。此页面与 bloc 配合良好。但是我想要实现的是在提交表单时验证表单。由于我是 flutter 的新手,我不知道该怎么做。

更改密码事件

abstract class ChangePasswordEvent extends Equatable {
  const ChangePasswordEvent();
}

class SubmitButtonPressed extends ChangePasswordEvent {
  final String oldPassword;
  final String newPassword;

  const SubmitButtonPressed({@required this.oldPassword, this.newPassword});

  @override
  List<Object> get props => [oldPassword, newPassword];
}
Run Code Online (Sandbox Code Playgroud)

更改密码状态

abstract class ChangePasswordState extends Equatable {
  const ChangePasswordState();

  @override
  List<Object> get props => [];
}

class ChangePasswordInitial extends ChangePasswordState {}

class ChangePasswordLoading extends ChangePasswordState {}

class ChangePasswordSuccess extends ChangePasswordState {}

class ChangePasswordFailure extends ChangePasswordState {
  final String …
Run Code Online (Sandbox Code Playgroud)

flutter bloc flutter-bloc

6
推荐指数
1
解决办法
6861
查看次数

如何使prime ng表格垂直和水平居中?

我正在使用 prime ng 9.1.3 和 primeflex 1.3.0。我正在使用 p-align-center。但我无法使表格垂直和水平居中。我使用 100vh 作为全屏高度。

<div class="p-grid p-align-center" style="height: 100vh">
  <div class="p-col-6" style="text-align: center"> 
    <h2>Sample app</h2>
  </div>

  <div class="p-col-6" style="background-color: #f1f1f2; height: 100%;">
    <div>
      <form>
        <h4>LOGIN</h4>

        <!--Email Starts-->

        <span class="ui-float-label">
          <input id="float-input" type="email" size="50" pInputText />
          <label for="float-input">Email</label>
        </span>

        <!--Email Ends-->

        <div style="margin-top: 25px"></div>

        <!--Password Starts-->

        <span class="ui-float-label">
          <input id="float-input" type="password" size="50" pInputText />
          <label for="float-input">Password</label>
        </span>

        <!--Password Ends-->

        <div style="margin-top: 25px"></div>

        <p-button label="Login" styleClass="ui-button-success"></p-button>
      </form>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是屏幕。

在此输入图像描述

css flexbox primeng angular

4
推荐指数
1
解决办法
2万
查看次数

标签 统计

angular ×1

bloc ×1

css ×1

flexbox ×1

flutter ×1

flutter-bloc ×1

primeng ×1