I now have an antd form component that wraps the input component inside the component. Now the input component can be manually controlled, and the verification function must be added. However, after the name attribute is deleted, it can be controlled manually, but it cannot be verified. If the name attribute is not deleted , it cannot be manually controlled
demo01
Can't be controlled
const [count,setCount] = useState('')
<Form>
<Form.Item label='test' name="test" rules={[{required:true}]}>
<Input
value={count}
onChange={(e)=>{
const {value} = e.target
// Can't be controlled
setCount(value)
}}
/>
</Form.Item>
</Form>
demo2
Can't check
const [count,setCount] = useState('')
<Form>
<Form.Item
label='test'
// name="test"
rules={[{required:true}]}> // 不能校验
<Input
value={count}
onChange={(e)=>{
const {value} = e.target
// 能受控
setCount(value)
}}
/>
</Form.Item>
</Form>
How can I make it both a verification and a controlled component, thank you
Related
I am using react-datetime inside a react-hook-form
I want the user to easily set the time to current time using a button Immediate. Instead of selecting the current time manually.
I am trying the below
const [currentDateTime, setcurrentDateTime] = useState(null);
<Controller
name="resetDateTime"
control={control}
required
render={({ field }) => (
<Datetime
onChange={setcurrentDateTime}
inputProps={{
placeholder: "MM-DD-YYYY HH:mm",
}}
value={currentDateTime}
viewMode="time"
/>
)}
/>
<Button color="primary" className="ml-1" onClick={() => setcurrentDateTime(moment())}>
{"Immediate"}
</Button>
The problem is onSubmit the react-hook-form I get resetDateTime = undefined
How to implement this properly. So I can use the Immediate button and also submit form and get the resetDateTime value
You're mixing RHF with your local state currentDateTime and are not linking the. field to RHF as you're missing to spread the field object to your <Datetime /> component.
The correct way would be to use RHF's setValue to update your resetDateTime field and get rid of the useState hook.
const { control, handleSubmit, setValue } = useForm();
<Controller
name="resetDateTime"
control={control}
required
render={({ field }) => (
<Datetime
{...field}
inputProps={{
placeholder: "MM-DD-YYYY HH:mm",
}}
viewMode="time"
/>
)}
/>
<Button color="primary" className="ml-1" onClick={() => setValue("resetDateTime", moment())}>
{"Immediate"}
</Button>
I have a Select component in antd which fails the lighthouse score:
<input type="search" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_0_list" aria-autocomplete="list" aria-controls="rc_select_0_list" aria-activedescendant="rc_select_0_list_0" value="" id="rc_select_0">
[aria-*] attributes do not have valid values
It also fails this:
[role]s do not have all required [aria-*] attributes
It is defined like this:
const roles = [];
ROLES.forEach((role) => {
roles.push(<Select.Option value={role} key={role}>{role}</Select.Option>);
});
return (
{roles}
);
Whats wrong here?
export function URLInput() {
const [value, setValue] = useState("");
return (
<Row>
<Col span={24}>
<FloatLabel label="URL" name="url" labelValue={value}>
<Form.Item
hasFeedback
name="url"
rules={[
{
required: true,
min: 5,
type: "url",
whitespace: true,
},
]}
>
<Input
name="url"
onChange={(event) => setValue(event.target.value)}
/>
</Form.Item>
</FloatLabel>
</Col>
</Row>
);
}
I currently have this Form.Item setup.
If there is already a value in url set in the form's initialValues, the Form.Item will magically populate the input field with the value.
However, I want to be able to access this value too so that I can initialize value in
const [value, setValue] = useState("I want to initialize the value here without introducing a props");
How do I do this?
Edit:
The <URLInput> component is actually used inside of a <Form> like this:
<Form
form={form}
onFinish={handleFormSubmit}
initialValues={{ content: content}}
>
<URLInput/>
</Form>
Pass form to URLInput as a prop, then inside URLInput you can access the initialValue url by invoking the following form.getFieldValue('url').
Please see working CodeSandbox example below:
https://codesandbox.io/s/antdform-accessing-formvalues-in-child-formitem-component-uwdb7
Happy coding!
I am using Ionic Cordova to build an iPhone app. I have a login screen username input and password input plus a submit button. I cannot make to focus on password input after typing the username and tap "return".
My login.html looks like this:
<ion-list >
<ion-item>
<div id="loginlogo"></div>
</ion-item>
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input type="text" name="usernameInput" (keyup.enter)="focusAndGo()" [(ngModel)]="usernameInput"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password" id="passwordInput" name="passwordInput" [(ngModel)]="passwordInput"></ion-input>
</ion-item>
<ion-item><button (click)="logincontrol()" ion-button color="light" block>Login</button></ion-item>
</ion-list>
and my login.ts look like this:
#ViewChild('passwordInput') nameInput;
focusAndGo()
{
var input = document.getElementById('passwordInput');
input.focus();
this.nameInput.setFocus();
//this.nameInput.nativeElement.focus();
//this.nameInput.nativeElement.setFocus();
//this.passwordInput.focus();
//alert(event.keyCode );
//if( event.keyCode ==13)
//{
//this.passwordInput.focus;
//}
}
I tried everything that is commented above. I cannot get cursor to move to next input.
I think you should prevent default behaviour before setting focus,
send $event to your function
<ion-input type="text" name="usernameInput" (keyup)="focusAndGo($event)" [(ngModel)]="usernameInput"></ion-input>
and use preventDefault() before setting focus
focusAndGo(e)
{
e.preventDefault();
var input = document.getElementById('passwordInput');
input.focus();
}
Update for a better aproach: this SO answer
(I updated the post after received an upvote, but I think the correct answer is the indicate in the link)
it's a old post but a posibility is make a directive like
#Directive({
selector: '[next-tab]',
})
export class NextTabDirective{
#Input('next-tab') nextControl: any;
#HostListener("keydown.enter", ["$event"])
onEnter(event: KeyboardEvent) {
if (this.nextControl.focus)
{
this.nextControl.focus();
event.preventDefault();
return false;
}
}
}
then you can use a form like
<form [formGroup]="dataForm" (submit)="submit(dataForm)">
<input formControlName="data1" [next-tab]="data2">
<input #data2 formControlName="data2" [next-tab]="data3">
<input #data3 formControlName="data3">
<button type="submit">Click</button>
</form>
I have the app working using Radio buttons e.g.
#using (Html.BeginForm("SetCulture", "Home"))
{
<input type="radio" name="culture" id="en-us" value="en-us" class="culture" /> English
<input type="radio" name="culture" id="tr" value="tr" class="culture" /> Türk
}
but when i use input of image type it does not send the wanted VALUE
#using (Html.BeginForm("SetCulture", "Home"))
{
<input type="image" src="~/Content/Images/en.png" name="culture" id="en-us" value="en-us" class="culture" />
<input type="image" src="~/Content/Images/tr.png" name="culture" id="tr" value="tr" class="culture" />
}
jQuery code:
$(".culture").click(function () {
$(this).parents("form").submit(); // post form
});
HomeController Code:
public ActionResult SetCulture(string culture){
// action code here
}
I see no reason why the images wouldn't work but for some reason it happens. Any ideas?
Thank you so much
In the first code block (using <input type="radio" .. />), you form will only post back one value for culture (the value of the selected radio button).
In the second code block (using <input type="image" .. />) your form will post back the values of both inputs, so your form data is culture=en-US&culture=tr
The DefaultModelBinder will bind the first value and ignore the second value so the value of culture in the POST method will always be "en-US" irrespective of which image you click.
One option would be to disable the other input (disabled inputs do not post back a value, for example
$(".culture").click(function () {
$(this).siblings().prop('disabled', true); // disable the other input
$(this).parents("form").submit(); // post form
});
Another option for handling this is to use <img> tags in conjunction with a hidden input for the culture value
<input type="hidden" name="culture" id="culture"/>
<img src="~/Content/Images/en.png" data-culture="en-US" class="culture" />
<img src="~/Content/Images/tr.png" data-culture="tr" class="culture" />
$('.culture').click(function () {
$('#culture').val($(this).data('culture')); // update the hidden input
$('form').submit();
})