我使用模板驱动的表单来添加任务,并且有两个输入字段的类型编号用于完成任务的估计分钟,
因为任务估计可以在几个小时内完成,例如1小时,或小时和分钟,如1Hrs 30分钟,所以我想有条件地设置输入所需的属性.因此,如果在提交表单时两个输入都为空,则必须设置2个输入中的一个或表单验证错误.
到目前为止,我已经这样做但验证不起作用
<form class="add-task" (ngSubmit)="onSubmit(newtask)" #newtask="ngForm">
<div class="estimate-container">
<input
type="number"
min="0"
max="10"
id="estimate_hrs"
ngModel
name="estimate_hrs"
mdInput
[required]="!estimateMins.valid"
placeholder="Estimated Hours"
#estimateHrs="ngModel"
>
<div class="error-msg" *ngIf="!estimateHrs.valid && !estimateMins.valid">
Please enter estimated hours
</div>
<input
type="number"
min="0"
max="60"
id="estimate_min"
ngModel
name="estimate_min"
mdInput
[required]="!estimateHrs.valid"
placeholder="Estimated Minutes"
#estimateMins="ngModel"
>
<div class="error-msg" *ngIf="!estimateMins.valid && !estimateHrs.valid">
Please enter estimated minutes
</div>
</div>
<button type='submit' [disabled]="!newtask.valid" >Submit</button>
</form>
Run Code Online (Sandbox Code Playgroud) 你好 :) 我对 react js 比较陌生,我正在尝试在作为另一个 div 的子级的 div 上应用动画,父 div " portfolio-product-item" 显示从 wp rest api 提取的特色图像,子 div " portfolio-product-item-details" 具有以下内容帖子。
我想要做的是将鼠标悬停在父 div 中的特色图像上时显示内容,我的代码是这样的,我该如何实现?
import React from 'react';
import Home from './Home';
require ('../../app.css');
require ('../../animate.min.css');
class Portfolio extends React.Component{
render(){
console.log(this.props.data.length);
var contents=[];
for (var i = 0; i < this.props.data.length; i++) {
contents.push(
<div className="col-xs-12 col-md-4">
<div id="portfolio-product-item" >
<img src={this.props.data[i].featured_image} />
<div ref= "productDetails" id ="portfolio-product-item-details" dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} />
</div>
</div>
);
}
return( …Run Code Online (Sandbox Code Playgroud)